Components - release notes

• Release notes

3.14.0

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 1.7.1.
• @dynatrace/strato-icons was updated to version 2.6.1.

Updates

General

• Fixed a SyntaxError: Unexpected token 'export' that occurred when consuming packages in vitest with pool: vmThreads by emitting an esm/package.json marker that correctly identifies the ESM output subtree as ES Module. (APPDEV-19866)

Charts

• Scrolling with the mouse wheel now pans in pan mode and zooms in zoom mode without needing to hold a modifier key. (APPDEV-19612)
• Fixed the legend text label button's clickable area to meet the WCAG 2.5.8 minimum target size of 24px. (APPDEV-19819)
• Added touch device support for chart tooltip interactions. (APPDEV-19792)
• The tooltip footer placeholder now reads "Click to access actions" instead of "Pin to access actions", includes a cursor icon, and appears with a shorter animation delay. (APPDEV-19665)

Core

• Fixed a crash when importing components in a Node.js context, such as SSR or config bundling, where window is unavailable. (APPDEV-19999)

Editors

• Fixed the text highlight animation playing when prefers-reduced-motion: reduce is active. (APPDEV-19890)
• Fixed off-screen error indicator pill animations to properly honor the prefers-reduced-motion user preference. (APPDEV-19889)

Filters

• Form controls using the legacy controlState prop are no longer affected by unrelated FormFieldMessages validation state in the same field. (APPDEV-19357)

Forms

• Form controls using the legacy controlState prop are no longer affected by unrelated FormFieldMessages validation state in the same field. (APPDEV-19357)
• Fixed onValidityChange being called while controlState is set. (APPDEV-19357)

Layouts

• Fixed defaultWidth on the sidebar and details panels so that it is read once when the panel mounts, matching the React defaultValue convention. (APPDEV-19606)
• Fixed the aria-label and aria-labelledby props on the PageLayout panel slots, which were overridden by the built-in panel labels. (APPDEV-19606)
• Fixed the PageLayout sidebar turning into an open drawer over the content, and onBreakpointTransition not firing, when the breakpoint prop changed while the container stayed the same size. (APPDEV-19606)
• Fixed the label prop on PageLayout.Details, which did not name the resize separator. (APPDEV-19606)
• Fixed the issue that reset the main content's scroll position when a sidebar or details panel was added or removed. A panel replaced with a new key now starts from its own defaultCollapsed and defaultLayout rather than inheriting the previous panel's state. (APPDEV-19606)
• Fixed the resizable sidebar and details panels stopping 8px short of the width the layout allows when the visual refresh is enabled, where the resize handle takes no space between the columns. (APPDEV-19606)
• Fixed the layout height so it now accounts for dynamic browser UI on mobile viewports. (APPDEV-19606)
• Fixed the loss of the details panel's own scroll position when it was collapsed and expanded, or switched between the side-by-side and overlay layouts. (APPDEV-19606)

Overlays

• Fixed the issue that left keyboard focus outside a dialog that was opened from a Menu.Item. (APPDEV-19146)

Accordion

• The content region now has a correct accessible name derived directly from Accordion.SectionLabel, fixing an issue where screen readers could not announce the section name. (APPDEV-19707)

AiLoadingIndicator

• Fixed the label gradient animation playing when prefers-reduced-motion is set to reduce. (APPDEV-19902)

AiResponse

• You can now render the content of a fenced code block as a component with the customCodeBlockRenderers prop. (DI-30803)

How to opt in

customCodeBlockRenderers maps a fence language to the component that renders blocks of that language, which lets a response carry a payload that is displayed as a component instead of as code. Blocks with any other language, and inline code, keep their default rendering.

The renderer receives the code of the block, its language, and isComplete. Content is revealed word by word, so a code block is rendered long before its content is complete. isComplete reports whether the closing fence of the block has arrived, which lets you show a placeholder until then.

import {
  AiResponse,
  type AiResponseCodeBlockProps,
  Skeleton,
} from '`@dynatrace/strato-components/content';`

const Visualization = ({ code, isComplete }: AiResponseCodeBlockProps) => {
  if (!isComplete) {
    return <Skeleton height={300} />;
  }
  return <DonutChart {...JSON.parse(code)} />;
};

const renderers = { 'dt-visualization': Visualization };

const Chat = ({ response }) => (
  <AiResponse customCodeBlockRenderers={renderers}>{response}</AiResponse>
);

AppHeader

• Fixed the AppIcon fade-in animation playing when prefers-reduced-motion is active. (APPDEV-19887)

Avatar

• Fixed the disabled Avatar's grey background circle from potentially detaching from its avatar when rendered in a scrollable container or at high browser zoom. (APPDEV-18950)

AvatarGroup

• The "+N" overflow trigger now uses InlineButton: it renders as plain underlined text instead of a filled, pill-shaped button. (APPDEV-18950)

ChipGroup

• The "Show more" / "Show less" trigger now uses InlineButton: its height is content-sized. While loading, the trigger now correctly blocks clicks and sets aria-busy/aria-disabled. (APPDEV-18948)

CodeEditor

• You can now subscribe to validation state changes via onValidityChange and trigger validation programmatically via editorRef.current.validate(). (APPDEV-18656)

Usage example

import { useRef, useState } from 'react';
import {
  CodeEditor,
  type CodeEditorRef,
} from '`@dynatrace/strato-components/editors';`
import {
  FormField,
  FormFieldMessages,
  Label,
} from '`@dynatrace/strato-components/forms';`
import type { ValidationState } from '`@dynatrace/strato-components/forms';`

const MyEditor = () => {
  const editorRef = useRef<CodeEditorRef>(null);
  const [state, setState] = useState<ValidationState>();

  return (
    <FormField>
      <Label>JSON configuration</Label>
      <CodeEditor
        ref={editorRef}
        name="config"
        language="json"
        required
        onValidityChange={setState}
      />
      <FormFieldMessages />
    </FormField>
  );
};

DataTable

• Fixed a rare invalid index console warning when data shrinks to fewer rows with certain other conditions. (APPDEV-19714)
• Rows no longer keep their previous height when line wrapping is toggled while they are scrolled out of view. (APPDEV-19714)
• Fixed the page crashing when downloading large datasets with many hidden columns. (APPDEV-13732)

DQLEditor

• Introduced the new showOffScreenDiagnosticIndicators prop that renders floating pill buttons at the top and bottom edges of the editor indicating off-screen error-severity validation problems, each showing the count of off-screen errors. Clicking a pill scrolls the nearest such error into view. (APPDEV-17075)

ExpandableText

• The "Show more" / "Show less" trigger now uses InlineButton: it has a visible keyboard focus indicator, and its underline offset scales with the font size. (APPDEV-18949)

FilterField

• Fixed the "not supported" hint message for not-starts-with, not-ends-with, not-contains, and not-matches-wildcard wildcard operators — they previously showed the hint for their positive counterpart (e.g. "Starts-with is not supported") instead of the correct negated operator name. (APPDEV-19904)
• Fixed app state API requests being made when filterNamespace is not set. (APPDEV-19810)
• addFilter and removeFilter now accept an optional valueType on the filter statement to control how the value is typed rather than inferring it from the value. removeFilter also supports key-only statements — omit value and comparisonOperator to target every statement for a key regardless of operator or value — and a parserConfig option for symmetric parsing with addFilter. (APPDEV-19753)
• Fixed the error that occurred when stale editor ranges were applied after the controlled filter value changed. (APPDEV-19425)
• Fixed onValidityChange being called while controlState is set. (APPDEV-19357)

HelpMenu

• Added 'default' option to the feedback prop, which calls the post_feedback_add_on_intent intent. (APPDEV-19670)

HistogramChart

• Fixed chart toolbar keyboard accessibility: the download button is now reachable via Tab when zoom and pan are disabled, and the intents menu now opens when pressing Enter on its trigger button. (APPDEV-19328)

InformationOverlay

• Fixed the overlay content being cut off or hidden at narrow viewport widths. (APPDEV-18609)
• The trigger now renders as an InlineButton, with its hover, open-state, and focus ring styling. (APPDEV-18447)

InlineButton

• Fixed the focus ring appearing on mouse clicks. Fixed the vertical padding overflowing the line height when rendered inside a heading. Fixed the keyboard focus ring rendering as a heavier two-tone ring instead of the thinner single ring used by other inline, text-flowing components.

Menu

• Fixed the trigger button missing explicit aria-haspopup="menu" and aria-expanded attributes, which prevented screen readers from correctly announcing the expanded/collapsed state. (APPDEV-19175)
• Fixed the group divider lines not being rendered between Menu.Group blocks in mobile mode (viewport ≤ 480 px). (APPDEV-19585)
• Fixed the slide-in animation in the mobile menu still playing when prefers-reduced-motion is set to reduce. (APPDEV-19885)
• Fixed the dropdown content being cut off at narrow viewport widths, which caused horizontal scrolling and violated WCAG 1.4.10 (reflow). (APPDEV-19215)

Page

• Fixed the sidebar and details panels not being exposed as landmark regions to assistive technologies when rendered in split mode. (APPDEV-19221)

ProgressBar

• Fixed the indeterminate animation playing when prefers-reduced-motion: reduce is active. (APPDEV-19883)

ProgressCircle

• Fixed the indeterminate spinning animation and determinate arc transition playing regardless of the user's reduced-motion preference. (APPDEV-19884)

Radio

• Fixed aria-describedby and aria-errormessage not matching a consumer-authored error message's id when the message wasn't associated with a specific form control. (APPDEV-19357)

SegmentSelector

• The trigger's chevron icon now rotates to point up while the overlay is open and back down when it closes, matching the expand/collapse affordance of other selectors such as the TimeframeSelector. (PAPA-36178)

Select

• Fixed the loading state not being announced to screen readers when the dropdown is open. (APPDEV-19524)

TerminologyOverlay

• The trigger now uses InlineButton: it has a visible keyboard focus indicator, dashed underline offset and thickness scale with the font size. (APPDEV-18448)

TimeframeSelector

• Fixed onValidityChange being called while controlState is set. (APPDEV-19357)

TimeseriesChart

• Fixed chart toolbar keyboard accessibility: the download button now receives Tab focus correctly when no intents are configured. (APPDEV-19328)
• Fixed the crash that occurred when swapping data to a different dataset after hiding a series via the legend. (APPDEV-19905)
• Fixed the bar highlight rectangle overflowing into the lower series when hovering over stacked bars clipped by a custom Y Axis Max. (APPDEV-19660)
• Annotations now appear in a compact, single-track view when the chart height is between 50px and 160px, instead of being hidden entirely. (APPDEV-19510)

TitleBar

• The Title subcomponent now accepts as and level props to control the semantic heading tag and visual heading size. (APPDEV-19207)

How to opt in

Use as to set the HTML heading element that fits your page's document outline, and level to adjust the visual heading size. Both default to their previous values (as="h2", level={3}), so existing usages are unaffected.

import { TitleBar } from '`@dynatrace/strato-components/layouts';`

{
  /* Step the semantic level down when the page already has an h2 */
}
<TitleBar>
  <TitleBar.Title as="h3">Section title</TitleBar.Title>
</TitleBar>;

{
  /* Adjust visual weight for a panel or dialog context */
}
<TitleBar>
  <TitleBar.Title level={4} as="h3">
    Panel title
  </TitleBar.Title>
</TitleBar>;

Toast

• Fixed enter and exit animations to properly honor the prefers-reduced-motion user preference. (APPDEV-19886)

TopList

• Fixed the tooltip showing a different formatted value than the Y-axis tick labels when valueFormatter is a FormatOptions object. (APPDEV-19803)
• The toolbar no longer appears. (APPDEV-19809)

XYChart

• Fixed the stacking of bar series with millisecond-precision timestamps and no end field stacking incorrectly when multiple datapoints fall within the same second on TimeSeries adoption. (APPDEV-19858)
• Fixed the log x-axis collapsing when zoom or pan produces a domain too narrow for D3 to generate log-scale ticks. (APPDEV-19748)
• Fixed ColorRule not applying to BarSeries bars when the series name is an array value and the rule targets the joined form (e.g. 'CPU user•host-a'). (APPDEV-19824)
• Fixed chart toolbar keyboard accessibility: toolbar controls are now reachable via Tab when the toolbar is fully collapsed or when interaction controls are hidden, and the intents menu now opens when pressing Enter on its trigger button. (APPDEV-19328)
• Fixed pan interactions being unavailable when zoom is disabled on a zoomed-in chart. (APPDEV-19782)
• Annotations now appear in a compact, single-track view when the chart height is between 50px and 160px, instead of being hidden entirely. (APPDEV-19510)

3.13.2

Updates

MeterBarChart

• Fixed the tooltip unpinning when clicking on nested menus in series actions.

MultiMeterBarChart

• Fixed the tooltip unpinning when clicking on nested menus in series actions.

3.13.1

Updates

FilterField

• Fixed app state API requests being made when filterNamespace is not set. (APPDEV-19810)

3.13.0

Dependency updates

• Changed peerDependency version range for @dynatrace-sdk/dqlint from ^1.3.0 to ^1.6.0. (APPDEV-19649)
• @dynatrace/strato-design-tokens was updated to version 1.7.0.
• @dynatrace/strato-icons was updated to version 2.6.0.

Deprecations

TimeseriesChart

• Deprecated TimeseriesChart.DownloadCSV slot. Download is now always active. (APPDEV-18865)
• Deprecated gapPolicy on TimeseriesChart.Line, TimeseriesChart.Area, and TimeseriesChart.Band slots. Use root-level gapPolicy on TimeseriesChart instead. (APPDEV-18865)
• Deprecated onMessage from the public API. It was never internally wired and has no effect. (APPDEV-18865)
• Deprecated strokeOnly on TimeseriesChart.Band. This prop no longer has any effect. (APPDEV-18865)
• Deprecated valueRepresentation on TimeseriesChart.Line, TimeseriesChart.Area, and TimeseriesChart.Bar slots. Use root-level valueRepresentation on TimeseriesChart instead. (APPDEV-18865)

Updates

Charts

• Fixed the series actions menu positioning on narrow viewports. The menu now opens below the tooltip when there is insufficient horizontal space. (APPDEV-19140)
• Fixed the legend item label always being announced as "Series name" by screen readers instead of the actual series name, and the visibility toggle button not reporting its pressed state. (APPDEV-19178)
• Increased height of the legend items to comply with accessibility requirements. (APPDEV-19542)
• Fixed the issue that prevented strings without line breaks from being properly truncated. (APPDEV-18898)
• Fixed the error thrown when hovering over a chart while its datapoints were being reprocessed. (APPDEV-19413)
• Fixed hidden legend series reappearing after a resize when initialRatio was set on the legend. (APPDEV-19410)

Editors

• The gutter column is now properly hidden when hideLineNumbers or singleLine is enabled in the BaseCodeEditor. (APPDEV-19609)

Forms

• Fixed a missing getServerSnapshot argument in useFormRuntimeRegistration that caused server-side builds to fail.

AnnotationsChart

• Fixed the missing aria-describedby attribute on trigger elements inside the chart when a tooltip is visible. (APPDEV-19480)

Chip

• The emphasized variants now have a 1px border in their semantic border color, and the neutral emphasized variant uses the base background color. These updates apply when the visual refresh is enabled. (APPDEV-19764)

ChipGroup

• Focus is now moved to the first chip revealed after "Show more" is clicked, improving accessibility. (APPDEV-19291)

Code

• The background and text color are now purple instead of neutral, with dedicated values for light and dark mode. (APPDEV-19763)

CodeEditor

• Introduced the new showOffScreenDiagnosticIndicators prop that renders floating pill buttons at the top and bottom edges of the editor indicating off-screen error-severity diagnostics, each showing the count of off-screen errors. Clicking a pill scrolls the nearest such error into view. (APPDEV-17072)

DataTable

• datetime columns now correctly format ISO-8601 string cell values in both the built-in cell renderer and the format() callback in custom cell renderers. (APPDEV-19591)
• Cell action trigger buttons no longer share an identical accessible name. Each button now includes the column and row, so screen readers can distinguish between them. (APPDEV-19656)
• Fixed the column actions trigger visibility not updating correctly on hover and sort interactions. (APPDEV-19739)
• Fixed the row not activating when clicking on a cell that contained an element with tabindex="-1", such as <CodeSnippet />. (APPDEV-19744)
• Fixed the native browser context menu being suppressed on right-click when no cell or column actions are configured. (APPDEV-19561)

DonutChart

• Fixed the missing aria-describedby attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)

FilterField

• Complete filter statements now use the base background with a neutral border and incomplete statements use a subdued border when the visual refresh is enabled. (APPDEV-19754)
• Switching from a comparison operator to a wildcard operator (= value*, = *value, = *value*) now automatically wraps the existing value with the appropriate wildcards. (APPDEV-18941)
• Wildcard characters (*) inside filter values are now highlighted in the FilterField editor to make it clear which asterisks are interpreted as wildcards. (APPDEV-18748)
• You can now enable wildcard-in-middle matching via the matchesWildcardConversion flag, which accepts * in any position of a value (e.g. eu-*-prod) and produces the new matches-wildcard and not-matches-wildcard operator nodes. (APPDEV-18747)
• Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)
• Reduced verbosity of suggestions overlay announcements for screen reader users. (APPDEV-19200)

FocusScope

• Fixed the focus containment so that elements the browser never tabs to, such as hidden controls, no longer let the focus escape to the document. (APPDEV-19493)

FormField

• The FormFieldMessages render function now receives a second argument with showErrors and isValid, so you can tell whether a potential error would now be visible for the field. (APPDEV-19340)
• You can now set showImmediately on a FormFieldMessages.Item with variant="error" to reveal it as soon as it mounts, bypassing the field's normal reveal gate (first blur, overlay close, or immediate-on-click). (APPDEV-19340)

GaugeChart

• Fixed the missing aria-describedby attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)

HelpMenu

• Fixed the app version not being announced by screen readers. It is now a focusable menu entry that users can reach with the arrow keys. (APPDEV-18962)

InlineButton

• You can now use the new InlineButton component for inline, text-flowing action triggers. It wraps naturally across line breaks like surrounding text, and supports color, loading, and disabled/aria-disabled states, plus optional Prefix/Suffix icon slots. It also accepts aria-expanded, aria-haspopup, and aria-controls for composing it as a disclosure or popup trigger. (APPDEV-18446)
• You can now use an as prop to render a different underlying element (e.g. as="button" to produce a native <button>). The default remains 'span', which preserves multi-line wrapping via box-decoration-break: clone. Other values opt out of that wrapping behavior. This is an accepted trade-off, useful when you need a specific element type to keep a forwarded ref correctly typed (e.g. HTMLButtonElement instead of HTMLSpanElement). (APPDEV-18446)

Markdown

• Inline code is now purple instead of neutral, with dedicated values for light and dark mode. (APPDEV-19763)
• The YAML frontmatter at the start of a document now renders as a metadata table, making its key-value pairs easier to scan than a raw text block. (APPDEV-17777)

Menu

• Menu.Group now accepts a label prop that renders a heading and names the group for assistive technology. A Menu.Label rendered inside a Menu.Group also becomes that group's accessible name automatically, so you no longer have to pair an id with aria-labelledby yourself. (APPDEV-18962)
• You can now soft-disable a Menu.Item with aria-disabled to keep it focusable and announced to screen readers while showing its Menu.ItemTooltip on desktop, so you can explain why an item is unavailable. Unlike the hard disabled prop, a soft-disabled item stays interactive and still fires onSelect, leaving the behavior to you, and selecting it does not close the menu. (APPDEV-19690)

MeterBarChart

• Fixed the missing aria-describedby attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)

MultiMeterBarChart

• Fixed the missing aria-describedby attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)

NumberInput

• Controlled value now correctly reflects transformations applied by the onChange handler in the same render (e.g. clamping to a minimum). (APPDEV-19356)

PieChart

• Fixed the missing aria-describedby attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)

Sheet

• Fixed the extra tab stop with no visible focus that appeared after the last interactive element. (APPDEV-19493)

Sparkline

• Fixed the bar variant opacity to align with other chart components. (APPDEV-19641)

TimeframeSelector

• The overlay now has a descriptive accessible name for the "Learn more" link. (APPDEV-18613)

XYChart

• Custom tooltip in XYChart now displays the selected truncation mode. (APPDEV-19728)
• Fixed "Zoom to selection" becoming non-clickable after pressing Escape on a finished selection and selecting again. (APPDEV-19593)

3.12.3

Updates

FilterField

• Fixed app state API requests being made when filterNamespace is not set. (APPDEV-19810)

3.12.2

Updates

FilterField

• Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.12.1

Updates

Forms

• Fixed a missing getServerSnapshot argument in useFormRuntimeRegistration that caused server-side builds to fail.

3.12.0

Dependency updates

• Removed react-is as a peer dependency. (APPDEV-19603)
• @dynatrace/strato-icons was updated to version 2.5.0.

Deprecations

Hint

• Hint component is deprecated in favor of FormFieldMessages. (APPDEV-18361)

3.11.4

Updates

FilterField

• Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.11.3

Updates

Charts

• Charts now accept aria-label, aria-labelledby, aria-describedby, and aria-details props, allowing you to provide meaningful accessible names for screen readers. (APPDEV-18646)
• Fixed the negative plot size that charts with a legend were given when the container was too small to fit the legend and its resizer. (APPDEV-19481)
• The chart legend now announces series visibility changes and copy actions to screen readers using an ARIA live region, so users relying on assistive technologies are informed when a series is hidden or shown, and when a series name is copied. (APPDEV-18621)
• The legend resizer in TimeseriesChart and TreeMap no longer snaps back to its original position after the user drags it and the chart container resizes. (APPDEV-19403)
• The legend hide/show button and series actions button now have descriptive accessible names that include the series name, fixing an accessibility violation where screen readers announced only "Hide" or an unlabeled button. (APPDEV-19188)

Editors

• Fixed the issue that left the active line indication on the wrong line, or missing from the gutter, after folding or unfolding code. (APPDEV-19016)
• The validation error state now keeps the regular text and syntax highlighting colors instead of turning plain text critical.
• In the validation error state, the line number and fold marker are now marked for only those lines that carry an error.
• The active line indication now continues across the gutter. (APPDEV-19016)

Layouts

• Fixed the horizontal scrollbar that appeared when PageLayout.Details was collapsed, or rendered as an overlay or drawer. The panel now takes up no space in those layouts. (APPDEV-19351)

Overlays

• Fixed focus being lost to <body> when users Tab past the last (or Shift+Tab past the first) focusable element inside an overlay — focus now returns to the trigger. (APPDEV-19359)
• The Drawer now uses proper dialog semantics (role="dialog" and aria-modal) so screen readers correctly identify it as a dialog. You can now provide an accessible name via aria-label or aria-labelledby. (APPDEV-18623)

Accordion

• Accordion.SectionLabel now accepts an aria-label prop to override the accessible name derived from its content. (APPDEV-19171)

AnnotationsChart

• Annotation tooltips no longer stay pinned when clicking elsewhere in the chart. Clicking a different annotation marker while one is already pinned now switches the pin to the new annotation. (APPDEV-18988)

Checkbox

• No longer sets the aria-checked attribute on the underlying input[type=checkbox].

CodeSnippet

• Fixed a crash when copying code in environments that block clipboard access, such as embedded pages. (APPDEV-19495)
• Fixed function names with trailing digits being incorrectly highlighted as number literals when rendering DQL syntax. (APPDEV-19541)

DataTable

• The column settings toolbar button no longer shows a wrong hidden column count when defaultColumnVisibility contains an invalid column ID. (APPDEV-19392)
• Interactive row triggers now expose their activated state and role description to assistive technologies via aria-selected and aria-roledescription. Column and cell action menu triggers now correctly report aria-expanded="false" when the menu is closed. (APPDEV-19180)
• Header column-action triggers are now keyboard-accessible: they display a visible focus ring and can be reached by tabbing. (APPDEV-18611)
• Improved the clarity and tone of column settings messages and tooltips. (APPDEV-18738)
• Selected row count is now announced to screen readers after the selection changes. (APPDEV-19167)

Divider

• You can now hide a decorative Divider from screen readers by setting aria-hidden. (APPDEV-18629)

DQLEditor

• Added showLintGutter prop to show per-line severity markers in a gutter column. (APPDEV-17073)
• Fixed the autocomplete section header incorrectly appearing at the second position instead of the top when navigating to a paginated suggestions page. (APPDEV-19531)
• Improved the autocomplete suggestion tooltip layout and content. (APPDEV-17385)
• Fixed function names with trailing digits being incorrectly highlighted as number literals in the autocomplete info popup synopsis. (APPDEV-19541)
• Fixed the autocomplete popup leaving extra space below informational text when no suggestions are available. (APPDEV-19536)

ExternalLink

• You can now set the role prop on ExternalLink.

FilterField

• The link to the documentation in the suggestions footer is now reachable and selectable via arrow key navigation. Screen readers now also announce that pressing Enter applies the filter when no suggestion is focused. (APPDEV-19131, APPDEV-19125)
• Selecting a comparison operator suggestion via keyboard no longer duplicates the operator when the user has already typed the same operator character. (APPDEV-19229)
• Fixed the filter field value not being announced by screen readers when it changes dynamically. (APPDEV-19164)

FocusScope

• Focus is now correctly returned to the modal scope when a closing Radix menu asynchronously restores focus to an element in the inert background. (APPDEV-19146)
• Tab and Shift+Tab now cycle within a contained focus scope instead of escaping to content behind the modal (for example, elements in a parent iframe). (APPDEV-18652)

FormField

• Fixed the aria-describedby attribute on form controls from incorrectly referencing IDs of error message elements that are not yet rendered in the DOM. (APPDEV-19407)

HistogramChart

• Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. (APPDEV-18988)

HoneycombChart

• Fixed the missing aria-describedby attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971)

IntentButton

• Fixed aria-label, aria-labelledby, aria-describedby, and aria-details not reaching the interactive element. (APPDEV-19384)

Menu

• Disabled Menu.Item elements are no longer reachable via keyboard navigation. (APPDEV-18649)
• The Menu.Trigger now sets aria-controls referencing the open menu content, allowing screen readers to announce the expanded state correctly. (APPDEV-19170)

MessageContainer

• Status and error messages are now announced by screen readers without requiring focus. (APPDEV-18622)

Modal

• Fixed an issue where it sometimes took the modal several seconds to become visible in Chrome when running inside an iframe. (APPDEV-19352)

SegmentSelector

• Fixed inline error not being associated with both select triggers via aria-describedby when a segment is missing required variables. (APPDEV-19001)
• You can now listen for onFocus and onBlur events at the whole-component boundary. onBlur is not emitted when focus moves between the trigger and the overlay. (APPDEV-17914)
• Pin, unpin, and remove buttons for segment presets now have a unique accessible name that includes the preset's name, so screen reader users can tell them apart. (APPDEV-19193)

Select

• Screen readers now announce the number of matching options when using Select.Filter to search the content. (APPDEV-18616)
• Fixed the inline clear-search (X) button inside the Select filter so it is now reachable and operable with the keyboard alone. (APPDEV-18640)
• The "Select all" control now exposes its selected state to assistive technologies, correctly announcing when all, some, or none of the options are selected. (APPDEV-18619)

TimeframeSelector

• Fixed the input resetting when typing a date on React 18 apps. (APPDEV-19509)
• Fixed the TimeframeSelector trigger button missing a descriptive accessible name, causing screen readers to announce only the currently selected value. (APPDEV-19189)
• You can now listen for onFocus and onBlur events at the whole-component boundary. onBlur is not emitted when focus moves between the trigger and the overlay. (APPDEV-17914)

TimeseriesChart

• Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. (APPDEV-18988)

TitleBar

• The decorative divider is no longer announced by screen readers. (APPDEV-19139)

TopList

• Fixed the drag-to-select gesture being available in the chart. (APPDEV-19065)
• The downloaded CSV now contains Label and Value columns. (APPDEV-19235)
• TopList no longer shows crosshair nor magnifier. (APPDEV-19228)

TreeMap

• Fixed the missing aria-describedby attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971)

XYChart

• XYChart.Select now accepts a disabled prop that suppresses drag-to-select entirely. (APPDEV-19065)
• Fixed the shared tooltip highlighting the wrong bar in grouped bar charts when hovering near a cluster. (APPDEV-19103)
• Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. Clicking a different annotation marker while one is already pinned now switches the pin to the new annotation. Legend filtering and toolbar interactions now also dismiss any pinned annotation tooltip. (APPDEV-18988)
• Fixed stacked AreaSeries incorrectly snapping zero-value datapoints to the chart baseline instead of resting on top of the accumulated stack. (APPDEV-19590)
• Fixed bar labels in reversed XYChart.BarSeries charts rendering at the wrong position after zooming. (APPDEV-19073)
• Fixed the missing aria-describedby attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971)
• Fixed stacked AreaSeries zero-value datapoints becoming invisible and undetectable by hover or selection when all series share a zero value at a given timestamp in a chart with relative value representation. (APPDEV-19590)
• Fixed the shared tooltip not adapting its width to the series value text, causing values to be clipped when they were wider than the series names. (APPDEV-19590)
• The crosshair line and magnifiers can now be suppressed per axis orientation using the new hideCrosshair prop on XYChart.XAxis and XYChart.YAxis. (APPDEV-19228)
• Fixed BarSeries labels rendering bolder and washed-out on Windows. (APPDEV-19526)
• Fixed the single tooltip grouping stacked AreaSeries datapoints that share the same raw value but are at different visual positions due to stacking accumulation. (APPDEV-19590)

3.11.2

Dependency updates

• Removed react-is as a peer dependency. (APPDEV-19603)

3.11.1

Updates

TimeframeSelector

• Fixed the input resetting when typing a date on React 18 apps. (APPDEV-19509)

3.11.0

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 1.6.0.

Deprecations

CodeEditor

• Deprecated gutterConfiguration prop. Use the diagnostics and showLintGutter props for per-line validation markers instead. (APPDEV-17071)

DataTable

• The per-threshold showIndicator option in the meterbar column config has been deprecated. Use showThresholdIndicators instead. Until it is removed, existing per-threshold showIndicator flags are collapsed into the column-level flag as a fallback when showThresholdIndicators isn't set. All true shows all indicators; all false hides them; mixed values log a warning. (APPDEV-17783)

MeterBarChart

• The showIndicator prop on MeterBarChart.ThresholdIndicator has been deprecated. Use the chart-level showThresholdIndicators prop instead. Until it is removed, existing per-threshold showIndicator flags are collapsed into the chart-level prop as a fallback when showThresholdIndicators is not set. All true shows all indicators; all false hides them; mixed values log a warning. (APPDEV-17783)

Updates

General

• Overlays such as Tooltip, Menu item tooltips, Select and FilterField suggestion lists, FeatureHighlight, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359)

Charts

• GaugeChart now accepts a top-level showThresholdIndicators prop to toggle the visibility of all threshold indicators at once (defaults to true). The showIndicator prop on GaugeChart.ThresholdIndicator remains deprecated in favor of it. (APPDEV-18834)
• The tooltip no longer briefly flashes at the viewport origin on first display. (APPDEV-19045)
• Fixed a bug where the GaugeChart threshold interval bar disappeared when two ThresholdIndicator elements had the same or very close values. (APPDEV-19230)
• Fixed chart tooltip symbol alignment when using SeriesItem description prop. The symbol is now always aligned to the top. (APPDEV-19225)
• Fixed an issue where charts displayed incorrect colors after switching between light and dark themes. (APPDEV-18752)
• Fixed the invalid role="presentation" and aria-label on the chart interactions overlay, which caused screen readers to announce misleading information. (APPDEV-18639)

Editors

• Aligned the inline-diagnostics hover tooltip styling with the FilterField diagnostic tooltip. Each severity now shows a leading icon (error, warning, info). (APPDEV-18787)

Layouts

• Fixed PageLayout.Details ignoring maxWidth in the overlay layout, so dragging the panel now stops at the configured maxWidth. The maxWidth is unset by default. In the split layout, the details panel is kept to roughly half the width by the content panel. In the overlay layout, the panel is bounded by the container. (APPDEV-18910)

Typography

• You can now set the id prop on Blockquote, Code, Emphasis, ExternalLink, Highlight, List, Strikethrough, and Strong.

Accordion

• Accordion.Section content with keepMounted is now automatically hidden from assistive technology when collapsed. (APPDEV-19165)

CodeEditor

• Fold gutter markers are no longer announced by screen readers during virtual cursor navigation. Folding remains operable via keyboard shortcuts. (APPDEV-18645)
• Added showLintGutter prop to show per-line severity markers in a gutter column. (APPDEV-17071)

DataTable

• Added a showThresholdIndicators option to the meterbar column config to toggle all threshold indicators at once (visible by default). (APPDEV-17783)
• Fixed columns incorrectly showing as "Hidden" in the column settings when opened while columns were still loading. (APPDEV-19382)
• Column action trigger buttons no longer share an identical accessible name. Each button now includes the column name, so screen readers can distinguish between them. (APPDEV-18617)
• The outer wrapper no longer causes an aria-prohibited-attr axe accessibility violation. (APPDEV-18944)
• The "Download CSV" menu options are now programmatically associated with their labels, and the toolbar's download/actions menu trigger now exposes its expanded state to assistive technologies. (APPDEV-19172)
• The built-in column headers for drag-and-drop row ordering, row selection, expandable rows, and row actions now have accessible names. (APPDEV-18631)
• Improved rendering performance by ensuring only affected table components re-render after internal state changes. (APPDEV-18255)
• A table with column ordering enabled no longer causes an aria-required-children accessibility violation when rendered with no data rows. (APPDEV-19287)
• Screen readers now announce the number of matching columns when searching in the column settings modal. (APPDEV-19199)

DateTimePicker

• Fixed a race condition where rapid ArrowUp/ArrowDown presses caused the displayed value to flicker. (APPDEV-18555)
• Fixed the calendar button from showing hover styles when DateTimePicker is disabled. (APPDEV-18548)
• Improved min/max boundary hint and error messages, and added dedicated messages for "Now" boundaries. (APPDEV-18457)
• You can now use onFocus and onBlur props on DateTimePicker; both fire at the whole-component boundary so opening and closing the calendar overlay does not produce spurious blur or focus events. (APPDEV-17911)

DQLEditor

• Autocomplete suggestion labels are now truncated with a middle ellipsis that adapts to the available space — longer type labels reduce the suggestion threshold so labels no longer wrap or overflow the panel. (APPDEV-17383)
• Added token type display next to each suggestion in the autocomplete panel. (APPDEV-17383)
• The autocomplete suggestion description no longer shows internal placeholder text for value suggestions. (APPDEV-19072)

FilterBar

• Fixed FilterBar.ResetButton not having a valid accessible name when the tooltip was closed because aria-labelledby referenced an element that was not yet in the DOM. (APPDEV-18942)

FilterField

• You can now use onFocus and onBlur props on FilterField; both fire at the whole-component boundary so moving focus between the editor, clear/pin buttons, and suggestions does not produce spurious blur or focus events. (APPDEV-17913)
• Added utilities to convert the syntax tree into DQL. convertFilterFieldTreeToDql returns a ready-to-use | filter … | search … statement, and enrichFilterFieldTreeWithDql returns the tree with a filterDql fragment on every node, plus a searchDql term on every group. Both accept a keyMap for renaming keys and an overrides callback for full, per-statement control. The escapeDqlIdentifier / escapeDqlStringLiteral helpers are exposed for use inside overrides. (APPDEV-18385)
• Empty values are not saved as recent filters. (APPDEV-19354)
• Fixed the duplicate * that was appended outside the closing quote when selecting a "starts with" suggestion for a quoted value that already ends with *. (APPDEV-19227)
• Fixed the grammar from treating ,, :, [, and `
• Fixed the cursor jumping to a wrong position while typing in a controlled FilterField. (APPDEV-19263)
• Fixed the random spacing between suggestions that appeared when many suggestions were listed. (APPDEV-19236)

HistogramChart

• Simplified the toolbar so that it only shows one button when interactions are disabled. (APPDEV-18812)

HoneycombChart

• Updated the documentation to present the unified ChartData format as the primary API. It includes numerical and categorical ChartData examples, a new "Data accessors" section documenting valueAccessor (default "value"), and colorPalette replacing colorScheme across examples. Expanded the component TSDoc accordingly. Custom ColoredRange coloring remains documented via the deprecated colorScheme prop. (APPDEV-18735)

InputGroup

• Improved zIndex prioritization of bordering fields within the group. (APPDEV-17761)

KeyboardShortcut

• Fixed platform-specific key labels. (APPDEV-18437)

Menu

• Menu.Item and Menu.Link no longer cause a React console warning when textValue is passed. (APPDEV-18440)

MeterBarChart

• Replaced threshold marker lines with internal threshold interval bars rendered below the meter bar. (APPDEV-17783)
• MeterBarChart now accepts aria-label, aria-labelledby, aria-describedby, and aria-details props, allowing you to provide sufficiently descriptive accessible names and descriptions for screen readers (WCAG 2.1 SC 1.1.1). The inner SVG plot element is now aria-hidden="true" to prevent redundant announcements inside the chart's role="img" container. If you rely on CSS selectors targeting `svg[aria-label="Chart Plot Area"

MultiMeterBarChart

• MultiMeterBarChart now accepts aria-label, aria-labelledby, aria-describedby, and aria-details props, allowing you to provide sufficiently descriptive accessible names and descriptions for screen readers (WCAG 2.1 SC 1.1.1). (APPDEV-19124)

SearchInput

• The built-in clear button now exposes an accessible name, so assistive technologies announce its purpose. (APPDEV-18637)

SegmentSelector

• Segment definitions are now refreshed in the background when the overlay is opened, ensuring variable query freshness after cross-tab changes. (APPDEV-16585)
• Segment presets that contain unavailable segments now show a "Remove" button instead of the pin/unpin button, allowing you to clean up broken presets. (APPDEV-18342)
• Now gives users better guidance in case of unavailable variables. (APPDEV-15882)

Select

• Fixed the native browser validation popup from appearing on required Select fields. (APPDEV-19286)
• Added onFocus prop. It only fires when focus enters the component from outside, not on internal transitions. (APPDEV-17910)
• Fixed the random spacing between options that appeared when many options were listed. (APPDEV-19236)

Sheet

• The title prop now accepts a ReactElement in addition to a string. (APPDEV-18664)

TextInput

• Fixed the TextInput.Button accessibility issue where aria-labelledby pointed to a non-existent element ID when the tooltip was not visible and silently overrode a consumer-supplied aria-label. (APPDEV-18942)

TimeframeSelector

• Fixed the boundary hint shown with a blank date value when an invalid date expression was passed as the min or max prop. (APPDEV-19284)
• Improved min/max boundary hint and error messages, and added dedicated messages for "Now" boundaries. (APPDEV-18457)
• Fixed TimeframeSelector.PresetItem setting aria-describedby to a non-existent element when the tooltip was closed. (APPDEV-18942)

TimeseriesChart

• Fixed the curve prop from not being applied to line and area series. (APPDEV-19197)
• Simplified the toolbar so it only shows one button when interactions are disabled. (APPDEV-18812)

TopList

• Added actions prop to TopList, allowing you to provide a context menu for each bar. The TopListActionItem type is exported for use with the callback. (APPDEV-19062)
• Bars with zero or near-zero values can now be hovered. (APPDEV-18759)
• Now supports colorPaletteMode prop. (APPDEV-18752)

XYChart

• Bars with zero or near-zero values can now be hovered. (APPDEV-18759)
• Pressing Escape with a series action menu open now correctly clears the series highlight after dismissing the tooltip.
• Fixed the legend size from getting stuck on a stale measurement when the chart is rendered inside a frequently re-rendering parent. (APPDEV-18842)
• Fixed the colorRule colorPalette on BarSeries from resolving to the palette's first color for every matching bar instead of the color matching the series' own index. (APPDEV-19198)
• Simplified the toolbar so it only shows one button when interactions are disabled. (APPDEV-18812)

3.10.6

Updates

FilterField

• Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.10.5

Updates

General

• Overlays such as Tooltip, Menu item tooltips, Select and FilterField suggestion lists, FeatureHighlight, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359)

3.10.4

Updates

Select

• Fixed the native browser validation popup appearing on required Select fields. (APPDEV-19286)

3.10.3

Updates

Charts

• The tooltip no longer briefly flashes at the viewport origin on first display. (APPDEV-19045)

XYChart

• Pressing Escape with a series action menu open now correctly clears the series highlight after dismissing the tooltip.

3.10.2

Updates

Forms

• Fixed the FormFieldMessages container remaining visible when a render function passed as children returns null or undefined. (APPDEV-19212)

3.10.1

Updates

TextArea

• Fixed an issue where the name prop was not forwarded to the underlying <textarea> element, causing TextArea to be excluded from native HTML form submissions. (APPDEV-19187)

3.10.0

Dependency updates

• Changed peerDependency version range for react-is from ^18.0.0 to ^18.0.0 || ^19.0.0.
• Changed peerDependency version range for react-dom from ^18.0.0 to ^18.0.0 || ^19.0.0.
• Changed peerDependency version range for react from ^18.0.0 to ^18.0.0 || ^19.0.0.
• @dynatrace/strato-icons was updated to version 2.4.0.
• @dynatrace/strato-design-tokens was updated to version 1.5.2.

Deprecations

Forms

• FocusEvents is deprecated. onFocusChange will be removed without replacement. onFocus and onBlur will be replaced with similar handlers from the FormControlProps type. This will change their event signature to FocusEvent. (APPDEV-17909)

Updates

General

• Fixed behavior tracking attributes on interactive elements that contain icons or other child elements, so the correct name is always captured regardless of where on the element the user clicks. (APPDEV-18428)

Charts

• Fixed a crash in the categorical legend when it had more than 50 items. (APPDEV-18778)
• TimeseriesChart, HistogramChart, and XYChart Annotations.Slot now expose textOverflow control, matching the standalone AnnotationsChart. (APPDEV-18591)
• Fixed inverted marker rendering. (APPDEV-18591)
• HistogramChart and TimeseriesChart now :support importing and exporting annotations config. (APPDEV-17653)

Core

• AppStateProvider no longer passes abort errors to the onError callback or stores them in the error state when a request is cancelled due to navigation or component unmounting. (APPDEV-18376)

Editors

• Fixed the editor placeholder not wrapping to multiple lines; a long or multi-line placeholder now wraps and grows the editor to fit instead of being truncated or making the editor vertically scrollable. (APPDEV-18517)

Forms

• Added onFocus and onBlur props to TextInput, TextArea, NumberInputV2, PasswordInput, SearchInput, Checkbox, Radio, RadioGroup, Switch, ToggleButtonGroup. TextInput, NumberInputV2, PasswordInput, SearchInput, RadioGroup, and ToggleButtonGroup only fire the blur when focus leaves the entire component, not on internal transitions (e.g. tabbing from the input to a suffix button).

Layouts

• Opening or closing the PageLayout details or sidebar panel no longer scrolls the main content back to the top. (APPDEV-18829)

Overlays

• Overlay and tooltip positioning now works correctly with React 19 by replacing the unmaintained react-popper dependency with a vendored, React 19-compatible version of the same hook. All existing modifier-based APIs are preserved unchanged.

AnnotationsChart

• You can now hover over truncated track labels to see the full label text in a tooltip. (APPDEV-18528)

CodeEditor

• Added diagnostics prop to display per-range inline validation feedback with a hover tooltip. Supports error, warning, and info severity levels. Takes precedence over the built-in JSON linter when language="json" is set. (APPDEV-17070)

CodeSnippet

• Fixed the freeze that occurred when syntax highlighting a DQL code snippet containing a triple-quoted string with many escaped quotes. (APPDEV-18665)

DataTable

• Redesigned the column visibility controls in the column settings modal. Replaced the "Show/hide all" checkbox with discrete "Show all" and "Hide all" buttons. Added a "List hidden columns" toggle switch with a hidden-column count. Added a visible/total column counter. When all columns are hidden and listing is off, an empty state is shown instead of the column list. (APPDEV-17483)
• MeterBar columns support opt-in inline value display via the showValue config option. Set it to 'left' or 'right' to show the value beside the bar. MeterBar columns now also enforce a minimum minWidth. An explicitly configured minWidth smaller than the default is ignored; only a larger value is respected. This prevents the bar from collapsing to nothing when the column is resized. (APPDEV-18171)
• Column settings search now highlights the matching parts of each column name. (APPDEV-17480)
• Column settings search now shows a "No results found" empty state with a "Clear search" button when the filter matches no columns. (APPDEV-17480)
• Improved accessibility of expandable rows. (APPDEV-17255)
• Fixed the keyboard focus ring on interactive rows showing tiny gaps at each corner. (APPDEV-18087)

DQLEditor

• Fixed the freeze that occurred when syntax highlighting a DQL query containing a triple-quoted string with many escaped quotes. (APPDEV-18665)
• Fixed a redundant tooltip appearing in the autocomplete when there are no suggestions and only info is shown. (APPDEV-18761)

FilterField

• Removing required from a FilterField correctly clears an existing error. (APPDEV-18473)
• Fixed a crash where Cannot read properties of undefined (reading 'to') was thrown during handleOnChange when the transaction selection's ranges array element was undefined. (APPDEV-18712)
• Fallback key and statement suggestions now include the operator's description in the suggestion details. (APPDEV-18595)

Menu

• On mobile viewports, Menu now renders as a full-screen drill-down panel instead of a fly-out dropdown. Sub-menus open as a new level users can navigate into, with a back button to return to the previous level. Desktop behavior is unchanged. (APPDEV-18330)

Microguide

• The "Next"/"Got it" button now exposes the current step and total step count in its behavioral tracking properties. (APPDEV-18320)

Modal

• Fixed scrolling inside the modal from propagating to the page body. (APPDEV-18048)

PieChart

• Subpixel slices (too thin to render individually) are now aggregated into a single visible neutral wedge instead of rendering as empty space. Hovering any of their legend rows now highlights that wedge, and hovering the wedge shows a tooltip summarizing how many small values it represents. (APPDEV-16209)

SegmentSelector

• Resolved an issue in the tooltip handler that could cause a React update loop when a segment was selected. (APPDEV-18786)

Sparkline

• Leading and trailing null values in the data array no longer collapse the beginning or end of the time axis. (APPDEV-18732)

TimeframeSelector

• Fixed the issue that caused TimeframeSelector to stop working when selected text was deleted across multiple fields. (APPDEV-18266)

TimeseriesChart

• Fixed the issue where annotation markers were incorrectly grouped when used inside <TimeseriesChart /> due to false pixel-based collision detection caused by a wider chart scale domain. (APPDEV-18774)
• TimeseriesChart now uses XYChart as its underlying rendering engine. (APPDEV-17741)

Tooltip

• Fixed alignment of the color dot and chevron in multi-line tooltip series items — both now appear on the first line instead of being vertically centered across the full item height. (APPDEV-18687)
• Added correct positioning behaviour to chart tooltip overflowing the viewport horizontally on mobile devices. (APPDEV-18672)

TopList

• Updated the API props required to set up the chart: Removed categoryAccessor, categoryFormatter, seriesIdAccessor, and seriesNameAccessor from TopListProps. (APPDEV-18751)

XYChart

• Fixed the min and max axis props to default to 'auto' when undefined is passed explicitly. (APPDEV-19012)
• The shared tooltip now highlights the hovered series and scrolls it into view when the series list is longer than the visible area. (APPDEV-18366)

3.9.2

Updates

FilterField

• Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.9.1

Updates

Select

• Fixed the native browser validation popup appearing on required Select fields. (APPDEV-19286)

3.9.0

Deprecations

Forms

• Deprecated the legacy controlState validation override APIs in favor of FormFieldMessages and native validation props. (APPDEV-18261)

FormField

• Deprecated the legacy controlId fallback. Pass id to the form control instead. (APPDEV-18261)

Updates

General

• Updated the @vanilla-extract/css dependency to 1.21.1, which fixes non-deterministic style composition output. An empty composed style used in a selector (e.g. a disabled state combining readOnly and ariaDisabled) could intermittently drop a class, changing generated class names between builds and, in rare cases, leaving a selector-targeted state unstyled.

Charts

• Fixed the annotation markers band top separator appearing when there is only one visible track, and the missing bottom separator in XYChart when track labels are displayed. (APPDEV-18335)

Editors

• Autocomplete no longer resets to the first page when hovering over a suggestion in a paginated autocomplete list. (APPDEV-18530)
• Fixed type-over behavior so typing a closing bracket or quote next to an auto-inserted one skips over it instead of inserting a duplicate when the editor is used in controlled mode. (APPDEV-18663)

Forms

• Improved consistency of form-control IDs, hints, errors, and validation behavior across migrated form controls. (APPDEV-18261)

Layouts

• Added a controlled width prop to PageLayout.Details for full control of the details panel width. Pair it with the existing onResize callback to follow drag-resizing; the requested width is clamped to fit the active layout mode (within minWidth/maxWidth in split, or the available container width in overlay). When omitted, the panel manages its own width from defaultWidth. (APPDEV-18256)
• Fixed PageLayout.Sidebar and PageLayout.Details breakpoint crossings overwriting a controlled collapsed and firing onCollapsedChange for controlled panels. A crossing now fires the new onBreakpointTransition(belowBreakpoint) callback instead and never changes a controlled collapsed. An uncontrolled Sidebar still auto-collapses below the breakpoint and reopens above it; Details never auto-collapses and honors defaultCollapsed on every viewport. Migration: use onBreakpointTransition instead of onCollapsedChange to react to crossings; consumers relying on the component to auto-close a controlled panel on narrow viewports must subscribe to onBreakpointTransition and update collapsed themselves. (APPDEV-18164)

Overlays

• Reduce Modal and Sheet horizontal padding to 16px on mobile viewports (APPDEV-18055)

AnnotationsChart

• Markers that visually collide on canvas, whether placed a single unit apart or overlapping through a long label, are now grouped into a shared tooltip so every marker stays reachable. You can also bring a marker to the front by hovering its item in a pinned tooltip. (APPDEV-18332)
• Fix tooltip not pinning on first tap on iOS. (APPDEV-18345)
• Added symbolColor prop to annotation markers. (APPDEV-12894)

CategoricalBarChart

• Fixed clicking a series item in the tooltip not opening its action menu and incorrectly re-pinning the tooltip at the click coordinates. (APPDEV-18480)

CodeEditor

• Improved the line highlight animation that plays when the editor value changes externally. The highlight now appears instantly and fades out smoothly, using a subtler color that no longer inverts the text color. (APPDEV-18552)
• Fixed controlled folding from failing to unfold when positions were removed from the folding prop (APPDEV-18343)
• Fixed folding not working when cursor was positioned inside the block in controlled setting. (APPDEV-18343)

DataTable

• Added formatDownloadHeader callback to DataTable.DownloadData and DataTableRef.downloadData() to override CSV header names per column. The callback receives { columnId, leafHeader, groupHeader } and can return a replacement string or undefined to keep the default header name. (APPDEV-10809)
• The download "All" option is no longer shown when using server-side pagination. (APPDEV-18494)
• Row and cell action menus are now closed when the table is scrolled and their anchor row leaves the visible area. (APPDEV-17725)
• Added disabledRowDragAndDropTooltip to the rowOrdering config and the useLockedRowOrder hook to explain why a row's drag handle is disabled. A default tooltip is shown while the table is sorted. (APPDEV-17473)
• Fixed the phantom drag mode that left column headers unresponsive to interactions after starting to drag a column and releasing immediately. (APPDEV-18523)
• Improved the look and feel of the column settings modal, as follows: columns are now grouped under "Pinned to left", "Pinned to right", and "Unpinned" section headers; drag handles moved to the left and the visibility and pinning controls to the right; hidden columns show a "Hidden" chip, and the controls have updated icons. (APPDEV-17477)
• Fixed the URL detection behavior in text column link rendering. (APPDEV-18658)
• Fixed the row drag handle tooltip not updating when the multi-sort changed. (APPDEV-17473)
• You can now customize the CSV download file name by passing a string or callback to the new fileName prop. (APPDEV-10808)

DateTimePicker

• Fixed the TypeError caused by Intl.DisplayNames.supportedLocalesOf being unavailable. (APPDEV-18299)

DQLEditor

• The "Format query" action menu item now displays its keyboard shortcut (Cmd+Shift+F on macOS, Ctrl+Shift+F on Windows/Linux). (APPDEV-18298)
• Improved the line highlight animation that plays when the editor value changes externally. The highlight now appears instantly and fades out smoothly, using a subtler color that no longer inverts the text color. (APPDEV-18552)
• Now shows the correct autocomplete suggestions after a duration unit. (APPDEV-18323)
• Code folding is now supported for block comments and subqueries. (APPDEV-18343)
• Now shows the correct autocomplete suggestion when typing a duration unit alias after a number. (APPDEV-18323)
• Fixed the issue where autosuggestions could carry over between separate DQL editors. (APPDEV-18160)
• Autocomplete now runs a fresh query when you type a dot, ensuring all fields are included in the suggestions. (APPDEV-18160)

ExternalLink

• Fixed the href attribute handling. (APPDEV-18658)

FilterField

• Fixed programmatic validation so validate() reveals the validation result consistently, including while the field has focus. (APPDEV-18261)
• Recent and pinned filter suggestions now use full syntax highlighting. (APPDEV-18229)

FormField

• Improved id semantics so labels, validation messages, and grouped controls target the intended form controls. (APPDEV-18261)

GaugeChart

• Fixed the tooltip trigger area to match the arc shape, so the tooltip no longer activates when hovering or tapping in the empty region outside the arc's angular span. (APPDEV-18472)

NumberInputV2

• Range/step validation errors (min/max/step) now block form submission and are no longer cleared when the required prop changes. (APPDEV-18575)

SegmentSelector

• Validates variable names against the defined includes filters.
• Fixed validation error being shown too early when selecting a segment with variables. (APPDEV-17459)
• Increased the maximum number of result records from 10,000 to 15,000. (APPDEV-18655)

Select

• Fixed an issue where pressing Enter to open the dropdown would also submit an enclosing form. (APPDEV-18459)

SingleValue

• Fixed context value labels for flat-line Sparkline. (APPDEV-18502)

TimeframeSelector

• Fixed the TypeError caused by Intl.DisplayNames.supportedLocalesOf being unavailable. (APPDEV-18299)
• Fixed the stepper not shifting absolute timeframes correctly. (APPDEV-18458)

TimeseriesChart

• Fixed annotation range marker labels expanding beyond their bounded width instead of truncating to fit. (APPDEV-18444)

TopList

• Fixed TopList bar labels using wrong color contrast when a ColorRule overrides the bar color. (APPDEV-18660)
• You can now apply per-datapoint color overrides to bars by passing one or more <TopList.ColorRule> slots as children. (APPDEV-18262)

XYChart

• Fixed the onZoomChange callback firing when the domain did not actually change, such as when zooming at a boundary, panning at an edge, resetting with no zoom applied, or selecting a zoom range identical to the current domain. (APPDEV-13044)
• Fixed XYChart.BarSeriesBar labels using wrong color contrast when a ColorRule overrides the bar color. (APPDEV-18660)
• XYChart.BarSeries now allows configuring color rules per datapoint. When every bar in the series is recolored to the same rule color, the legend swatch adopts that color; if only some bars match (or match different colors), the legend keeps the original series color. (APPDEV-18262)

3.8.3

Updates

FilterField

• Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.8.2

Updates

SegmentSelector

• Increased the maximum number of result records from 10,000 to 15,000. (APPDEV-18655)

3.8.1

Updates

FilterField

• Fixed build warnings due to extra commas in css file (APPDEV-18608)

3.8.0

Dependency updates

• Changed peerDependency version range for @dynatrace-sdk/client-platform-management-service from ^1.7.0 to ^1.8.0.
• @dynatrace/strato-design-tokens was updated to version 1.5.1.
• @dynatrace/strato-icons was updated to version 2.3.1.

Deprecations

Filters

• validateAsync() on filter control imperative refs will be removed in the next major version. In its place, validate() will return Promise<ValidationState> directly. Use validateAsync() now if you need the validation result, but be prepared to switch back to validate() when the breaking change lands. (APPDEV-18178)

Forms

• validateAsync() on form control imperative refs will be removed in the next major version. In its place, validate() will return Promise<ValidationState> directly. Use validateAsync() now if you need the validation result, but be prepared to switch back to validate() when the breaking change lands. (APPDEV-18178)

CodeEditor

• isControlled is deprecated from the start and will be removed when fully controlled behavior becomes the default. (APPDEV-5775)

DataTable

• The name prop on thresholds in DataTableMeterbarColumnConfig is deprecated. Threshold names are not displayed in the table and this prop will be removed. (APPDEV-15841)

DonutChart

• Deprecated DonutChartData type. Use the unified ChartData format with labelAccessor/valueAccessor instead. (APPDEV-17850)

DQLEditor

• isControlled is deprecated from the start and will be removed when fully controlled behavior becomes the default. (APPDEV-5775)

HoneycombChart

• Extended HoneycombChart to support the unified ChartData format via a new HoneycombChartAccessorDataProps API. Pass a ChartData array to data and use valueAccessor (default "value") to specify the value field. The new colorPalette prop replaces colorScheme on the new API. The existing HoneycombCategoricalProps and HoneycombChartNumericalProps APIs remain fully functional but are now deprecated. ChartData and ChartDatapoint are exported as shared types. Closes APPDEV-17849.

Page

• Deprecated the Page component and all its related types and sub-components. Please use PageLayout instead. (APPDEV-18104)

PieChart

• Deprecated PieChartData and SliceData interfaces. Use the unified ChartData format with labelAccessor/valueAccessor instead. (APPDEV-17850)

Updates

General

• Changelog files are now included in the published packages for easier agentic access.

Charts

• Fixed the tooltip's series actions menu closing when scrolling inside it. (APPDEV-18359)
• Fixed tooltip not repositioning when dragging on a fixed-width chart on a mobile device. (APPDEV-18435)
• Fixed the tooltip from not resetting when the toolbar is clicked or dragged. (APPDEV-18187)
• The standalone TopList component is now available in the Strato package. (APPDEV-17246)
• Fixed the toolbar auto-collapse logic and added collapse button to Map toolbar. (APPDEV-18014)
• Fixed annotation markers from being cut off when TimeseriesChart, HistogramChart, or XYChart are rendered at small heights. Charts now gracefully adapt their layouts by progressively hiding annotations and axes to ensure a clean display at any size. (APPDEV-17485)

Editors

• Fixed the caret jumping to the end of the placeholder when an empty editor lost focus. (APPDEV-18218)
• Fixed the text color of the selected suggestion item, including its prefix, in light mode. (APPDEV-18126)

Filters

• You can now use the onValidityChange prop on FilterField, SegmentSelector, and TimeframeSelector to react to validation state changes. (APPDEV-17939)

Forms

• You can now use the onValidityChange() prop on form controls to react to validation state changes, and call validateAsync() on their refs to imperatively await the result. The results rely on the ValidationState, ValidationError, and, ValidityStateKey types (APPDEV-17939)
• Validation types ValidationState, ValidationError, ValidityStateKey, and related types are now exported from the public API. You can now use the onValidityChange prop on form controls to react to validation state changes, and call validateAsync() on their refs to imperatively await the result. (APPDEV-17939)

Layouts

• Changed the PageLayout.Content rendered element from div to main for better screen reader support.

AnnotationsChart

• Fixed annotation value markers from rendering at incorrect positions and not triggering tooltips when right-aligned near the chart edge. (APPDEV-18119)

AppHeader

• The Logo's releasePhase prop now also accepts 'new', 'deprecated' and 'early-access'. (PPFB-801)

Button

• Fixed the loading state to be accessible. The button now stays in the tab order with aria-disabled and signals its busy state via aria-busy instead of becoming unreachable through the native disabled attribute. (APPDEV-16535)

CategoricalBarChart

• Fixed unpinned ChartTooltip from not being properly hidden when scrolling the page. (APPDEV-18095)

CodeEditor

• Keyboard shortcuts for code folding are now possible. See documentation for keybindings.(APPDEV-3639)
• Tooltips on autocomplete suggestions are now also shown on mouse hover. (APPDEV-17382)
• Fixed an editor crash that occurred sometimes when clicking on an editor while it was hidden, detached, or mid-layout (e.g. inside a re-rendering or collapsing container). (APPDEV-17855)
• You can now opt in to fully controlled editor behavior. Set isControlled={true} to have the editor always reflect value and forward user input via onChange. When false (default), existing value behavior stays unchanged. As this prop will be removed when fully controlled behavior becomes the standard, it is already deprecated. (APPDEV-5775)

CodeSnippet

• Introduced a fullHeight prop that allows the component to fill the height of its parent container. (APPDEV-17851)

DataTable

• Added aria-label, aria-labelledby, aria-describedby, and aria-details props. A default aria-label of "Data table" is applied automatically when no accessible name is provided. (APPDEV-17681)
• Fixed the row ordering drag-and-drop live region from being placed inside `[role=grid
• Fixed the interactive row highlight border becoming misaligned with the pinned column borders at non-100% browser zoom levels. (APPDEV-18333)
• The column settings modal now requires at least one visible column. Clicking "Apply" with all columns hidden shows a blocking error message and keeps the modal open. (APPDEV-7035)
• Fixed column settings search from not matching grouped columns by their group header label. (APPDEV-18217)
• Added visibleColumnLimits to DataTable.VisibilitySettings to cap the number of visible columns in the column settings modal. Exceeding the maxWarning threshold shows a non-blocking message; exceeding the maxError threshold shows a blocking error message and disables the "Apply" button. Limits can also be supplied per invocation via openColumnSettings() on DataTableRef, taking precedence over the slot value. (APPDEV-7035)
• Fixed the React warning "Cannot update a component while rendering a different component" by scoping store re-renders to affected components. This also fixes the "Maximum update depth exceeded" error that occurred in some apps. (APPDEV-18418)

DonutChart

• Added support for the unified ChartData format (`ChartDatapoint[

DQLEditor

• Tooltips on autocomplete suggestions are now also shown on mouse hover. (APPDEV-17382)
• Fixed an editor crash that occurred sometimes when clicking on an editor while it was hidden, detached, or mid-layout (e.g. inside a re-rendering or collapsing container). (APPDEV-17855)
• Fixed incorrect spacing around the actions menu trigger button when the visual refresh introduced in Strato 3.5.0 is enabled. The trigger is now correctly aligned to the top-right corner of the editor. (APPDEV-18162)
• Updated the list of DQL commands used for syntax highlighting with the following: removed experimentalFieldsSummary and experimentalLoad, added metrics, and prepared syntax highlighting support for new, upcoming commands. (APPDEV-18180)
• DQL formatting is now available via a built-in menu button or keyboard shortcut (Ctrl-Shift-f, Mac: Cmd-Shift-f). (PRODUCT-12538)
• Improved DQL autocomplete when replacing existing command tokens, including nested subqueries. (APPDEV-17943)
• You can now opt in to fully controlled editor behavior. Set isControlled={true} to have the editor always reflect value and forward user input via onChange. When false (default), existing value behavior stays unchanged. As this prop will be removed when fully controlled behavior becomes the standard, it is already deprecated. (APPDEV-5775)

FilterField

• Aligned the boxShadows to match other inputs when the visual refresh introduced with Strato 3.5.0 is enabled. (APPDEV-17773)
• Fixed a syntax error message from appearing while the user is actively typing after refocusing a previously-blurred field. (APPDEV-18122)

GaugeChart

• Fixed the toolbar and tooltip not appearing with the first tap on touch devices. (APPDEV-18144)

HistogramChart

• HistogramChart now uses XYChart as its underlying rendering engine. (APPDEV-16422)

HoneycombChart

• Added textSize prop to support fixed pixel size and automatic per-tile size selection for tile labels. (APPDEV-14157)
• Fixed pinned tooltip disappearing when clicking on whitespace. (APPDEV-18423)
• Fixed the toolbar from not appearing and the toolbar menu (3-dot menu shown when intents are present) from flickering when interacting with the chart on mobile. (APPDEV-18067)

Menu

• Fixed nested submenus overflowing the viewport on mobile screens. Submenus now stack inline below their trigger at viewport widths ≤ 480px, and long menu item text truncates with ellipsis. Desktop behavior is unchanged. (APPDEV-18058)

Page

• Aligned the styling of the collapsed sidebar with that of the PageLayout component. (APPDEV-18295)

PieChart

• Added support for the unified ChartData format (`ChartDatapoint[

ReleasePhaseIndicator

• Added 'early-access' as a new supported phase. (PPFB-801)

RunQueryButton

• Fixed the non-cancelable loading state to correctly signal its non-interactive state via aria-disabled and aria-busy. Also removed a redundant aria-live region that caused screen readers to announce the button as a group. (APPDEV-16535)

SegmentSelector

• Improved tracking of segment variable usage. (PAPA-34118)

Select

• Fixed a performance issue that caused all options to re-render when hovering a single option. (APPDEV-15702)
• The hover style for options is now handled via CSS, meaning mouse hover and keyboard focus styles are visually distinct. (APPDEV-15702)
• Fixed incorrect option heights and blank, over-scroll whitespace on initial open of the virtualised list. (APPDEV-18184)
• Fixed the keyboard navigation in virtualised Select lists so that focused options scroll into view and wrapping past the last or first option correctly reveals the item at the opposite end. (APPDEV-18186)

TimeframeSelector

• Clicking the stepper now saves the shifted value as recently used timeframe. (APPDEV-18225)

TreeMap

• Fixed the toolbar from not appearing and the toolbar menu (3-dot menu shown when intents are present) from flickering when interacting with the chart on mobile. (APPDEV-18067)

XYChart

• You can now set allowDecimals={false} on a numerical axis to show only whole-integer tick labels. (APPDEV-18068)
• Fixed the issue where the first AreaSeries slot rendered as absolute values instead of percentages when using valueRepresentation="relative" with multiple slots that each carry inline data. (APPDEV-18259)
• Fixed the issue where hovering overlapping annotation markers set to auto highlighted only one indicator instead of every indicator shown in the tooltip. (APPDEV-18409)

3.7.2

Updates

SegmentSelector

• Increased the maximum number of result records from 10,000 to 15,000. (APPDEV-18655)

3.7.1

Updates

DataTable

• Fixed the React warning "Cannot update a component while rendering a different component" by scoping store re-renders to affected components. This also fixes the "Maximum update depth exceeded" error that occurred in some apps. (APPDEV-18418)

3.7.0

Deprecations

Charts

• Deprecated legacy _ChartTooltip and InteractiveChartTooltip. Instead, use ChartTooltip.

HoneycombChart

• Deprecated showLabels prop in favor of the new labelsDisplay prop. When both are set, labelsDisplay takes precedence. (APPDEV-17484)

MeterBarChart

• Deprecated tooltip: boolean consumer config. Instead, use tooltip: { hidden?: boolean }. (APPDEV-17808)

MultiMeterBarChart

• Deprecated tooltip.enabled consumer config. Instead, use tooltip.hidden. (APPDEV-17808)

Updates

General

• Removed CodeSandbox preview links from use case examples. (APPDEV-16704)

Charts

• Fixed charts from crashing when an empty string was provided as a color value. (APPDEV-18083)

Editors

• Autocomplete suggestions can now also be selected using the tab key. (APPDEV-3426)

Layouts

• Fixed PageLayout sidebar and details panels firing onCollapsedChange(false) and force-opening on mount when collapsed or defaultCollapsed was true and the container started above the breakpoint. The explicit collapsed state is now respected on the first measurement. (APPDEV-18054)

AnnotationsChart

• Fixed annotation markers not being sorted by priority when ungrouped, which had caused incorrect stacking order. (APPDEV-17931)

Avatar

• Fixed initial letter not being vertically centered at non-100% browser zoom levels on Windows. (APPDEV-17890)
• Fixed font properties not being inherited correctly when an avatar is rendered as a button element. (APPDEV-17890)

CodeEditor

• Added a defaultValue prop for uncontrolled usage. It sets the initial editor content. Existing value behavior is unchanged. (APPDEV-17373)
• Fixed an editor crash that could occur when hovering over an editor while it was hidden, detached, or mid-layout (e.g. inside a re-rendering or collapsing container). (APPDEV-17905)

DataTable

• Column ordering via drag and drop now scrolls correctly when dragging columns to the edge of the table. (APPDEV-17398)
• The empty state container is now sticky and stays centered within the visible viewport when the table is horizontally scrollable. (APPDEV-17722)
• Dragging a column header no longer causes the page to scroll unexpectedly. (APPDEV-17906)
• Fixed an issue in Firefox where resizing a column where columnOrdering was enabled incorrectly triggered column dragging. (APPDEV-17925)
• In tables with sub-rows, custom headers in the sub-row column now use the full width. (APPDEV-16976)
• Fixed the sub-row expander path not showing correctly after moving the last child row to the first position via drag-and-drop row ordering. (APPDEV-18043)
• Fixed the loading spinner not being vertically centered in the visible data area when the user had scrolled the table before a loading state was triggered. (APPDEV-18091)

DateTimePicker

• Letter key presses in a number spin button are now silently ignored. (APPDEV-17978)
• Right-clicking after selecting across multiple fields now shows the browser's native Cut/Copy context menu, without losing the current selection. (APPDEV-17476)

DQLEditor

• Added a defaultValue prop for uncontrolled usage. It sets the initial editor content. Existing value behavior is unchanged. (APPDEV-17373)
• DQLEditor.ActionsMenu now accepts optional children. Custom menu items passed as children are rendered between the built-in Copy query and Open documentation actions. (APPDEV-17376)
• Fixed an editor crash that could occur when hovering over an editor while it was hidden, detached, or mid-layout (e.g. inside a re-rendering or collapsing container). (APPDEV-17905)
• The autocomplete popup now includes an info section below the suggestions and shows relevant keyboard shortcuts along with a link to the DQL syntax documentation. (APPDEV-17384)

FilterField

• Fixed an issue where clicking the clear button triggered premature validation and caused a brief error state. (APPDEV-15429)
• Fixed a crash ("Ranges must be added sorted by from position") that occurred when CodeMirror produced multiple visible ranges. (APPDEV-17983)
• Add removeFilter value operation helper for programmatically removing filter values from a FilterField value string. (APPDEV-17700)
• Added the addFilter value operation helper to programmatically add filter values to a FilterField value string. (APPDEV-17699)

HoneycombChart

• Fixed tooltip pinning on touch devices where hover events are never fired before a tap. (APPDEV-18139)
• Added labelsDisplay prop to control which tile label content is shown. (APPDEV-17484)

Modal

• Fixed nested-overlay focus race where opening an overlay from inside another overlay (e.g. a Modal opened from a Menu inside a Sheet) could leave focus on the outer trigger. FocusScope now tracks active contain scopes on a stack so only the topmost scope owns focus, focus that escapes the top scope is pulled back into it when the new target lives in another registered scope, and inertness is reference-counted so an inner scope unmounting no longer clears the outer scope's inert state. Focus moving into a non-FocusScope sibling portal (e.g. a Menu opened inside a Modal) is left alone, so the nested overlay's interactions are no longer interrupted. (APPDEV-17567)

Page

• Fixed the PageLayout resize handler element space when the visual refresh is enabled. (APPDEV-17898)

SearchInput

• Fixed SearchInput stepper from showing "1 / 0" when there were no matches. (APPOBS-33512)

SegmentSelector

• Removed the 320 px width cap on the empty state so Manage segments and Learn more about segments no longer truncate. (PAPA-33581)

TimeframeSelector

• Fixed the stepper ignoring the controlled value when stepping through timeframes. (APPDEV-18106)
• Letter key presses in a number spin button are now silently ignored. (APPDEV-17978)
• Users can now set the start or end time of a range to the current time using the new "Set time to now" button in the calendar overlay. (APPDEV-17429, APPDEV-17430)
• Right-clicking after selecting across multiple fields now shows the browser's native Cut/Copy context menu, without losing the current selection. (APPDEV-17476)
• Selecting a preset after stepping no longer restores the previous stepper position on the next step. (APPDEV-18088)

Toast

• Fixed incorrect icon padding and borders in certain cases due to a CSS specificity issue. (APPDEV-17979)

TreeMap

• Fixed tooltip pinning on touch devices where hover events are never fired before a tap. (APPDEV-18139)

XYChart

• Fixed the rendering of BarSeries data points that have only a start value (x0/y0). These will now default to a 5px width/height.

3.6.1

Updates

SegmentSelector

• Increased the maximum number of result records from 10,000 to 15,000. (APPDEV-18655)

3.6.0

Updates

General

• Fixed type signatures for data-dt-value-content and data-dt-children-value-content in BehaviorTrackingProps — both are now correctly typed as boolean.

Charts

• Exposed ChartTooltip.Header and ChartTooltip.Footer as public API. ChartTooltip.Footer can now be passed as a child slot to override the default footer, enabling custom actions and placeholder text.
• Added optional series description rendered alongside the name, a proper multi-line wrap mode, and increased the tooltip body max-height for the new Tooltip.

AnnotationsChart

• Added custom tooltip support via AnnotationsChart.Tooltip slot. (APPDEV-16290)
• Migrated the old tooltip to use the new unified tooltip.

CodeSnippet

• Null literals are now syntax-highlighted when using the dql language. (APPDEV-17731)
• With the DQL language, a query between at least two triple-quoted strings in one line is no longer highlighted as a string. (APPDEV-17719)
• With the DQL language, a single-line comment containing consecutive double-quote characters is now correctly highlighted as a comment to the end of the line. (APPDEV-17719)

DataTable

• openColumnSettings() now accepts resetColumnVisibility, resetColumnOrder, and resetColumnPinning to define a custom reset state when opening the column settings modal programmatically. (APPDEV-17273)
• Fixed sorting arrow disappearing when initially opening the column actions menu via right-click. (APPDEV-17723)

DateTimePicker

• Fixed an issue where pressing Backspace after selecting all spin buttons via Ctrl+A and then clicking a single spin button would clear all spin buttons instead of only the clicked one. (APPDEV-17766)
• Now copies placeholder text when digits are missing. (APPDEV-17358)
• Fixed undo reverting more than the last pasted input. (APPDEV-17359)

DQLEditor

• Typing a backtick or other dead-key character on keyboard layouts that require IME composition no longer corrupts the editor content. (APPDEV-17841)
• Autosuggestions now open only on typing, Ctrl+Space, or focus into an empty editor — not on cursor navigation or focus into a non-empty editor. Additionally, autosuggestions now reopen after ESC when continuing to type a command prefix following an inline block comment. (APPDEV-17881)
• Null literals are now syntax-highlighted. (APPDEV-17731)
• A query between at least two triple-quoted strings in one line is no longer highlighted as a string. (APPDEV-17719)
• A single-line comment containing consecutive double-quote characters is now correctly highlighted as a comment to the end of the line. (APPDEV-17719)
• Added DQLEditor.ActionsMenu slot that enables a built-in actions menu with "Copy query" and "Open documentation" actions. (APPDEV-17375)

FilterField

• Suggestions now match and highlight eligible details text while keeping operator and generated supported-values details display-only. (APPDEV-17870)
• Pressing Enter on the clear or pin button triggers the respective button. (APPDEV-17705)
• Fixed suggestion application when a custom suggestion provides its replacement range in reverse order. (PAPA-33294)

GaugeChart

• Added support for custom tooltip via render function in GaugeChart.Tooltip slot. (APPDEV-17878)

HistogramChart

• HistogramChartXAxisProps and HistogramChartYAxisProps now use the shared MinScaleBoundary and MaxScaleBoundary types for their min and max props. (APPDEV-13235)

HoneycombChart

• Added support for custom tooltip. (APPDEV-16287)

Menu

• Fixed several outside-click dismissal issues on the Menu component. (APPDEV-16531)

MeterBarChart

• Added custom tooltip support to MeterBarChart.Tooltip slot. The tooltip is now enabled by default and can be hidden via the hidden prop. (APPDEV-16288)

MultiMeterBarChart

• Added custom tooltip support to MultiMeterBarChart.Tooltip slot. The tooltip is now enabled by default and can be hidden via the hidden prop. (APPDEV-16288)

SearchInput

• Added an optional stepper. (APPOBS-33512)

SegmentSelector

• The "Manage segments" button now opens the Segments management page in a new browser tab instead of a modal overlay. (PAPA-33167)
• Now safeguards possible empty strings more thoroughly. (APPDEV-16653)

Select

• Improved accessibility so the announced option count is accurate when the list opens and duplicate option announcements are removed. Added support for custom option aria-labels, and ensured aria-label is not set when the option’s visible text already provides the accessible name. (APPDEV-17345)

SingleValue

• SingleValue and SingleValueGrid now accept aria-label and aria-describedby props for accessibility. (APPDEV-17682)

TerminologyOverlay

• Screen readers now announce the full overlay content when expanded. (APPDEV-17342)

TimeframeSelector

• When a selection spans both the "from" and "to" inputs and the user types an expression trigger key (n, @, +, -), the "to" input is now also cleared instead of retaining its previous value. (APPDEV-17481)
• Fixed unreliable focus of the hour spin button after selecting a date from the calendar. (APPDEV-17353)
• Now copies placeholder text when digits are missing. (APPDEV-17358)
• Fixed clear button not dismissing validation errors and apply button not working after clearing. (APPDEV-17664)
• Navigating between the two inputs using Backspace or Delete no longer deletes content in the destination input. (APPDEV-17478)
• Setting a width on TimeframeSelector now correctly stretches the trigger to fill the available space, with the label left-aligned and the chevron pushed to the right. (APPDEV-17776)
• Now uses the existing date as a reference when populating hours automatically. (APPDEV-17475)
• Fixed partial defaultValue or value (only from or only to set) being silently ignored and treated as if no value was provided. (APPDEV-17663)
• Fixed undo reverting more than the last pasted input. (APPDEV-17359)

TimeseriesChart

• Fixed the chart staying in pan mode after releasing the mouse over the chart body while dragging the time axis. (APPDEV-17818)

TreeMap

• Value label is now shown on leaf nodes whenever there is space to display it, even when the value text is wider than the node in a single layout pass. The label is truncated to fit rather than hidden. (APPDEV-17627)
• Added a slot that allows disabling and customizing the tooltip. (APPDEV-16286)

XYChart

• Improved x-axis tick label alignment so boundary ticks no longer overflow the chart edges. Enabled adaptive tick count reduction on logarithmic x-axes to prevent label collisions, and ensured grid lines always match the number of visible tick labels. (APPDEV-17775)
• Horizontal axes now display a better number of ticks avoiding collisions for numerical and time domains. (APPDEV-17304)
• Added an optional labelAccessor prop that renders a text label inside each bar. (APPDEV-17241)
• Fixed stacked/grouped BarSeries and stacked AreaSeries with valueRepresentation="relative" collapsing every bar to 100% when only one series is visible. (APPDEV-17339)

3.5.3

Updates

SegmentSelector

• Increased the maximum number of result records from 10,000 to 15,000. (APPDEV-18655)

3.5.2

Updates

General

• Fix type signatures for data-dt-value-content and data-dt-children-value-content in BehaviorTrackingProps — both are now correctly typed as boolean.

DQLEditor

• Autosuggestions now open only on typing, Ctrl+Space, or focus into an empty editor — not on cursor navigation or focus into a non-empty editor. Additionally, autosuggestions now reopen after ESC when continuing to type a command prefix following an inline block comment. (APPDEV-17881)

3.5.1

Updates

Core

• Removed boxShadow: none from focus ring base styles. Now the focus ring styles in the non-focused state no longer override the visual refresh box shadow.

EmptyState

• Image url for visual preset with context document and type something-missing is now correct.

FilterField

• Fixed focus styles when visual refresh is enabled.

3.5.0

Dependency updates

• @dynatrace/strato-icons was updated to version 2.3.0.
• @dynatrace/strato-design-tokens was updated to version 1.5.0.

Deprecations

XYChart

• Deprecated XYChart.CustomTooltip slot. Use XYChart.Tooltip instead. (APPDEV-16900)

Updates

General

• Components using useFocusRing no longer re-render when the input modality changes while they are not focused. (APPDEV-5547)
• Added design token overrides for a future visual refresh. This includes colors, surface elevations, and form field border styles across all components. (APPDEV-17223, APPDEV-17224, APPDEV-17225, APPDEV-17310, APPDEV-17311, APPDEV-17312)

Charts

• The ChartTooltip now allows showing two lines of data within the Header. (APPDEV-17272)
• Fixed ChartTooltip so the latest displayed tooltip appears on top. (APPDEV-17620)

Core

• useFocusRing with isMinimal: true and no explicit color now correctly applies the neutral focus ring styles. (APPDEV-17403)

AnnotationsChart

• Annotation indicators now correctly highlight and dim when the chart cursor or tooltip aligns with a marker timeframe. (APPDEV-17635)

ChipGroup

• When the user selects "Show more", the focus remains on the control so they can easily select "Show less". (APPDEV-17212)
• Made the "Show more" and "Show less" controls properly show the focus ring on keyboard focus. (APPDEV-17403)

CodeEditor

• Virtual focus styles now use consistent design token-based colors and animations. (APPDEV-17187)

CodeSnippet

• Keyword highlighting for DQL language no longer highlights non-keywords, matching the behavior of the DQLEditor. (APPDEV-11154)
• Syntax highlighting for DQL language no longer highlights the colon of a parameter. (APPDEV-11154)
• Number literals followed by a duration or calendar duration unit suffix are now highlighted when using the dql language. (APPDEV-17380)
• Boolean literals are now syntax-highlighted when using the dql language. (APPDEV-17379)
• Added log-language highlighting support for 16-character hex IDs (letter-leading and digit-leading). (APPDEV-11851)

DataTable

• Fixed vertical alignment of values in sparkline columns. Cells of sparkline columns now correctly stretch to fill the full row height. (APPDEV-17156)
• CSV download options now display row counts. When no table action intents are configured, the options are shown directly, instead of being nested. (APPDEV-16778)
• The interactive row associated with an open cell or row actions menu is now highlighted while the user interacts with the menu. (APPDEV-17386)
• Row ordering drag handles now correctly reflect the disabled state for all rows after sorting and clearing sorting. (APPDEV-17657)
• Fixed an unexpected focus ring appearing on the drag handle after dropping a row via mouse. (APPDEV-17634)
• When pagination is enabled, the scrollToRow function now navigates to the correct page and scrolls to the correct row. (APPDEV-12465)
• Fixed the focus ring not being visible on the drag handle of the dragged row when reordering rows via keyboard. (APPDEV-17634)
• Added log-content highlighting support for 16-character hex IDs so both letter-leading and digit-leading IDs are highlighted consistently. (APPDEV-11851)

DonutChart

• Now has a slot that allows you to disable and customize the tooltip. (APPDEV-16241)

DQLEditor

• Syntax highlighting no longer highlights commands when they appear at the beginning of another token. (APPDEV-11154)
• Number literals followed by a duration or calendar duration unit suffix are now highlighted. (APPDEV-17380)
• Boolean literals are now syntax-highlighted. (APPDEV-17379)

FilterField

• Fixed validatorMap key suggestion details not being shown for keys with literal value predicates. (APPDEV-17670)
• Virtual focus styles now use consistent design token-based colors and animations. (APPDEV-17185)

HistogramChart

• Selection area tooltip now has improved visuals and performance. (APPDEV-16293)

InputGroup

• No longer renders a grid wrapper when no children are provided, preventing unintended spacing in the UI. (APPDEV-17490)

Menu

• Now checks whether code is running in a browser before accessing browser-only APIs, preventing potential SSR (server-side rendering) issues. (APPDEV-17212)

Page

• PageLayout is now available as a new, more flexible replacement for Page. (APPDEV-17730)

PieChart

• Now has a slot that allows you to disable and customize the tooltip. (APPDEV-16241)

Select

• Virtual focus styles now use consistent design token-based colors and animations. (APPDEV-17185)

TimeframeSelector

• Fixed a duplicate "Please fill in this field" error message that appeared alongside the "Empty timeframe" validation message. (APPDEV-17488)
• Backspace and Delete now clear every selected spin button on Safari (cross-side selections included), instead of only the spin button at one end of the selection.
• Fixed an issue where selecting a preset item triggered a click on elements below the overlay. (APPDEV-17367)

TimeseriesChart

• Selection area tooltip now has improved visuals and performance. (APPDEV-16293)

XYChart

• Selection area tooltip now has improved visuals and performance. (APPDEV-16293)
• When filtering series through the legend, categorical axes no longer change domain. Numerical axes now adapt to the domain of the visible series in the Y coordinate, and keep the full domain on the X coordinate. (APPDEV-17181)

3.4.1

Updates

General

• Fix type signatures for data-dt-value-content and data-dt-children-value-content in BehaviorTrackingProps — both are now correctly typed as boolean.

DQLEditor

• Autosuggestions now open only on typing, Ctrl+Space, or focus into an empty editor — not on cursor navigation or focus into a non-empty editor. Additionally, autosuggestions now reopen after ESC when continuing to type a command prefix following an inline block comment. (APPDEV-17881)

3.4.0

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 1.4.0.

Updates

General

• Behavior tracking attributes are now supported in all button components, including Button, IntentButton, NotifyButton, and RunQueryButton. (APPDEV-16876)
• The text and icon color tokens for the success on accent button are now correct. (APPDEV-17388)
• Behavior tracking attributes are now supported in all form components, including Calendar, Checkbox, DateTimePicker, DateTimeRangePicker, FieldSet, FormField, Label, NumberInput, NumberInputV2, PasswordInput, Radio, SearchInput, Select, Switch, TextArea, TextInput, and ToggleButtonGroup. (APPDEV-16882)
• Behavior tracking attributes are now supported in FilterBar, FilterField, SegmentSelector, and TimeframeSelector. FilterField.Suggestions and TimeframeSelector.Presets now also support behavior tracking attributes. (APPDEV-16881)
• Added feature flag and css overrides for design tokens for visual refresh. (APPDEV-17223)

Charts

• Annotations now allows metadata for intents. (APPDEV-17129)
• Chart.Legend now correctly respects the initialRatio prop when the chart is first rendered without data and later receives data. (APPDEV-17415)
• Legend interactions are now disabled when loading is visible. (APPDEV-16703)

Core

• useFocusRing considers the modality correctly when the focusWithin flag is set.

Editors

• Default placeholder texts are now shown when no placeholder is explicitly provided. (APPDEV-17048)

Forms

• Improved read-only state for form components: TextInput, TextArea, PasswordInput, NumberInput, DateTimePicker, DateTimeRangePicker, Select, Switch, Checkbox, RadioGroup and ToggleButtonGroup. (APPDEV-16539, APPDEV-16540, APPDEV-16542, APPDEV-16543, APPDEV-16544, APPDEV-16545, APPDEV-16546, APPDEV-16547, APPDEV-16548)
• Default placeholder texts are now shown when no placeholder is explicitly provided. (APPDEV-17048)

Overlays

• Fixed the issue where pressing Cmd+Enter or Ctrl+Enter on an overlay trigger made the trigger stick and prevented it from opening again with the keyboard. (APPDEV-17378)

AnnotationsChart

• Fixed an issue in the AnnotationsChart where range marker alignment with indicators was incorrect when space is constrained (APPDEV-17128)

CategoricalBarChart

• Threshold indicator tooltips now match the updated chart tooltip design. (APPDEV-16294)

ChipGroup

• The expand/collapse control button now correctly references the chip group via aria-controls.
• The Show more control no longer remains visible after all chips are removed. (APPDEV-11526)
• Dynamically-added chips no longer flash visibly before being hidden behind the Show more control. (APPDEV-11526)

CodeSnippet

• Kotlin, Swift, and Groovy are now supported languages. (APPDEV-12954)

DataTable

• The page now remains interactive when cell or column actions menu is open. (APPDEV-17100)
• When downloading large tables as CSV, a progress indicator is now shown, and the table stays responsive during the download. (APPDEV-13387)
• Sorting controls are now also available in the column actions menu for any column with sorting enabled. (APPDEV-16866)
• The buttons for showing/collapsing row details from expandable rows no longer have a broken aria-controls reference. (APPDEV-17125)
• Unpinned columns can now be ordered via drag and drop while other columns are pinned. (APPDEV-16859)

DateTimePicker

• Arrow key navigation on empty spin buttons now cycles correctly through values instead of sticking at "00".
• Changing the precision while a spin button is partially filled now functions without breaking the input. (APPDEV-17299)
• Selected SpinButton values can now be deleted via Delete, Backspace, and Cut. (APPDEV-16125)
• Relative-value expression inputs now support partial text selection and deletion. (APPDEV-17229)
• Selection behavior for spin buttons when using Shift+ArrowLeft/ArrowRight now allows values to be deselected correctly. (APPDEV-17229)
• Spinbutton placeholders now use uppercase format (YYYY, MM, DD) for improved clarity and consistency.

DonutChart

• The tooltip has an updated layout and performance improvements. (APPDEV-15962)

DQLEditor

• Autocomplete now reopens when typing resumes after dismissing suggestions with Esc, as well as when the cursor is positioned before or after a comment. (APPDEV-16879)
• Autocomplete suggestions now open automatically when the cursor is placed on a new line after existing query content. (APPDEV-17256)

FilterField

• No longer crashes when saving pinned or recent filter fails due to missing permissions (403/401). Pinning is silently disabled in those cases. (APPDEV-17372)
• Improved the visual style of pasted content. (APPDEV-16263)
• suggestStatementOnValueMatch now matches values case-insensitively. (APPDEV-17294)
• Typing a key followed by a space inside a bracket group ((foo ), for example) now shows the correct suggestions. (APPDEV-17232)
• Fixed the highlight range from potentially being out of bounds. (APPDEV-17263)
• Pasting multi-line text no longer inserts literal newlines — line breaks are collapsed into spaces so the pasted content stays on a single line. (APPDEV-11712)

GaugeChart

• Has a new and improved tooltip, which now also shows by default. (APPDEV-16899)

HistogramChart

• Threshold indicator tooltips now match the updated chart tooltip design. (APPDEV-16294)

HoneycombChart

• The tooltip in the HoneycombChart has a renewed view and improved performance. (APPDEV-16285)

IntentButton

• IntentButton.Item now supports a disabled state. (APPDEV-17301)

Label

• Now displays a "(read only)" text suffix when the associated form field is read only. (APPDEV-16541)

Menu

• The Menu trigger now correctly shows its active state when the Menu is open. (APPDEV-16688)

MeterBarChart

• MeterBarChart.Tooltip now accepts a name prop to customize the label displayed in the tooltip. (APPDEV-16994)
• Added Legend slot with a hidden prop. MeterBarChart.ThresholdLegend is deprecated in favor of MeterBarChart.Legend. (APPDEV-16834)
• The single meter bar now supports the loading state. (APPDEV-16795)

Microguide

• The overlay is now rendered in the correct position, regardless of style load order. (APPDEV-17240)

MultiMeterBarChart

• The Legend slot now supports a hidden prop. (APPDEV-16834)
• The multimeter bar now supports the loading state. (APPDEV-16795)

PieChart

• The tooltip has an updated layout and performance improvements. (APPDEV-15962)

Select

• When opening a second Select on mobile, the first one closes. (APPDEV-17015)

TimeframeSelector

• Arrow key navigation on empty spin buttons now cycles correctly through values instead of sticking at "00".
• Changing the precision while a spin button is partially filled now functions correctly and doesn't break the input. (APPDEV-17299)
• Selected SpinButton values can now be deleted via Delete, Backspace, and Cut. (APPDEV-16125)
• Calendar now resets the selection when reopened.
• DateTime inputs can now be scrolled horizontally on mobile devices. (APPDEV-16852)
• Fixed spin buttons not restoring properly when an absolute value is set to the same date after fields were manually cleared. (APPDEV-17389)
• Select all in the expression input no longer throws an error when the browser wraps the text content in element nodes. (APPDEV-16987)
• Relative-value expression inputs now support partial text selection and deletion. (APPDEV-17229)
• Fixed pasting invalid expressions into the from-input from replacing the arrow separator. (APPDEV-17277)
• Selection behavior for spin buttons when using Shift+ArrowLeft/ArrowRight now allows values to be deselected correctly. (APPDEV-17229)
• Fixed digit keys from being incorrectly forwarded from a TextSpinButton (e.g. AM/PM) to an adjacent NumberSpinButton. Digits typed on a TextSpinButton are now silently ignored. (APPDEV-17276)
• Fixed copying from a single focused field.
• Pasting formatted dates and times is now supported. (APPDEV-16822)
• Spinbutton placeholders now use uppercase format (YYYY, MM, DD) for improved clarity and consistency.

TimeseriesChart

• Threshold indicator tooltips now match the updated chart tooltip design. (APPDEV-16294)

Toast

• No longer displays incorrect visual styles. (APPDEV-17316)

TreeMap

• The component now supports a new labelsDisplay="clusters-and-values" option that shows the category (cluster) label alongside only the value inside each leaf square. (APPDEV-16922)
• Errors thrown inside the formatter prop are now correctly caught and rendered as the ErrorState. (APPDEV-17319)
• Migrated the default tooltip to use the new OverlayTooltip component for consistency with other chart components. No changes to the public API or visual appearance. (APPDEV-16898)

XYChart

• Fixed an issue that caused AreaSeries to show duplicate gap datapoints when stacked.
• BarSeries that are grouped by category now have grid lines, making them easier to see. (APPDEV-17201)
• Fixed thresholds are no longer hidden when their assigned axis is filtered out via the legend. (APPDEV-16553)
• Fixed bar/rect selection to include bars with very small or zero pixel heights, while still excluding datapoints whose y-value lies outside the visible y-axis domain.
• Threshold indicator tooltips now match the updated chart tooltip design. (APPDEV-16294)

3.3.3

Updates

FilterField

• Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.3.2

Updates

FilterField

• FilterField no longer crashes when saving pinned or recent filters fails due to missing permissions (403/401). Pinning is now disabled gracefully in those cases. (APPDEV-17372)

3.3.1

Updates

Page

• User-provided data-dt-name and data-dt-properties attributes on Page.PanelControlButton are no longer overridden by the default values. (APPDEV-17287)

TimeframeSelector

• Fixed preset and recent suggestions being incorrectly disabled when max is set to an expression value (e.g. now). (APPDEV-17327)

ToggleButtonGroup

• User-provided data-dt-name attribute on ToggleButtonGroup.Item is no longer overridden by the default value. (APPDEV-17287)

Tooltip

• User-provided data-dt-name attribute on the trigger is no longer overridden by the default value. (APPDEV-17287)

3.3.0

Dependency updates

• Changed peerDependency version range for @dynatrace-sdk/client-notifications-v2 from ^1.0.0 to ^1.0.0 | ^2.0.0.
• @dynatrace/strato-icons was updated to version 2.2.0.

Deprecations

FilterField

• The object notation of the validatorMap component's keyPredicates is now deprecated. Use the array notation instead. (APPDEV-15798)

Instead of accepting an object, the keyPredicates now have to be provided as an array. See the example below:

const validatorMap = {
- keyPredicates: {
-   myKey1: {
-     valuePredicate: ...
-   },
-   myKey2: {
-     valuePredicate: ...
-   },
- },
+ keyPredicates: [
+   {
+     key: 'myKey1',
+     valuePredicate: ...
+   },
+   {
+     key: 'myKey2',
+     valuePredicate: ...
+   },
+

• The FilterFieldValidatorMapTypePredicate is now deprecated. Adding the type to the valuePredicate will no longer be supported to restrict a key's value to a specific type or set of types. Use the valueType on FilterFieldKeySuggestionConfig instead, providing a FilterFieldPrimitive type (or custom type) or array of types.

const validatorMap = {
  keyPredicates: [
    {
      key: 'myKey1',
-     valuePredicate: {
-       type: ['String', 'Number']
-     },
+     valueType: ['String', 'Number']
    },
    {
      key: 'myKey2',
      valuePredicate: [
        'warning',
        'error',
-       { type: 'String' }
      ],
+     valueType: 'String',
    },
  ],
};

• The FilterFieldDuration type is now deprecated. Instead of providing durations as { value: ..., unit: ...} objects in the validatorMap, use simple strings instead.

const validatorMap = {
  keyPredicates: [
    {
      key: 'myKey1',
      valuePredicate: [
-       { value: 10, unit: 'ms' },
-       { value: 1, unit: 's' },
+       '10ms',
+       '1s',
      ],
    },
  ],
};

TimeframeSelector

• Deprecated clearable prop in favor of the new built-in clear button. (APPDEV-16374)

Updates

Charts

• Fixed an issue where the annotations tooltip would grow beyond its intended size when the description text is long. (APPDEV-17117)
• The legend now prevents highlighting series when hovering between the margins of the elements. (APPDEV-16894)

Editors

• Scroll containers now have an explicit role="group" attribute to fix an accessibility issue where focusable elements were missing an implicit or explicit role. (APPDEV-16997)

Accordion

• Added data-dt-properties attribute to the section trigger and section header.

AppHeader

• Spacing between the logo text and the release phase indicator was corrected. (APPDEV-16591)

convertToColumns

• The timeframe columns now accept ISO date strings for start and end values in addition to Date objects. (APPDEV-17007)

DataTable

• Column headers now display sort order indicators when multiple columns are sorted simultaneously. (APPDEV-10404)
• Gantt chart annotations now display indicators that highlight the position of annotation markers in the chart. Indicators can be configured per track and overridden per marker using the indicatorsDisplay prop. (APPDEV-16812)
• Fixed an issue that occurs in rare cases due to a rendering timing issue. (APPDEV-16787)
• Built-in TableActionsMenu (CopyItem, LineWrap, HideColumn, ColumnOrder, ColumnPinning, ColumnFontStyle) actions now have onSelect callback available. (APPDEV-4846)
• MeterBarChart tooltip in meterbar columns is now unpinned on click outside the chart or tooltip. (APPDEV-16627)
• Sparkline columns allow configuration for min, max and scale of the yAxis. (APPDEV-16840)
• The column resize handle now meets ARIA requirements and no longer causes an aria-required-children violation.
• Added data-dt-properties attribute to the toolbar and column line wrap actions, column header sorting, row selection controls, sub-row 'Expand' and 'Collapse' buttons, and column settings modal visibility controls.
• The imperative handle now exposes getDisplayedRowIds, which returns the IDs of the displayed rows in their display order. (APPDEV-16929)
• Column reordering via drag and drop now meets ARIA requirements and no longer causes an aria-required-children violation.

DateTimePicker

• Added data-dt-properties attribute to the calendar's header, day, month, and year buttons.
• Now supports clearing the selected value via a built-in clear button. (APPDEV-16374)

ExpandableText

• Added data-dt-properties attribute to the 'Show more' and 'Show less' buttons.

FilterField

• The contains-middle and ends-with matches are now grouped together when sorting suggestions by match relevance while typing (exact → starts-with → contains-middle/ends-with). (APPDEV-16055)
• Custom validation functions are now called for each element in a value list. (APPDEV-17106)
• Added data-dt-name and data-dt-properties attributes to the suggestions, 'Clear' button, 'Delete filter statement' buttons, 'Show more' and 'Show less' buttons, and the filter syntax link. (APPDEV-16903)
• Invalid value error messages now include the supported value types for the key. For custom types defined via customTypes, a label can be provided. Per default, the type name is used. (APPDEV-16719)
• Suggestions can now be grouped using the validatorMap. The object notation of the keyPredicates doesn't support groups. Switch to the array notation to add groups. (APPDEV-15798)
• The valuePredicate function is now called correctly for values of type Variable.
• Typing a relative timeframe character (n, +, -, @) while focused on an absolute date input now automatically switches to relative timeframe mode. (APPDEV-16134)

FocusScope

• Focus-visible (focus ring) is now prevented when focus is moved after pointer interaction. (APPDEV-16864)

GaugeChart

• GaugeChart now supports loading prop. (APPDEV-16152)

HealthIndicator

• HealthIndicator.Label no longer causes an aria-prohibited-attr accessibility violation. (APPDEV-16907)

HistogramChart

• Setting indicatorsDisplay: 'auto' on an annotation marker now correctly overrides a track-level always configuration, so that all marker-level values (auto, never, always) take precedence over the track-level configuration. (APPDEV-17153)

HoneycombChart

• Fixed a bug that prevented showing a tooltip in the area where three hexagons meet. (APPDEV-17154)

MeterBarChart

• The tooltip has an updated layout and performance improvements. (APPDEV-16627)

Microguide

• Added data-dt-properties attribute to the 'Next' and 'Got it' buttons.

MultiMeterBarChart

• The tooltip has an updated layout and performance improvements. (APPDEV-16627)

Page

• Added data-dt-properties attribute to the 'Expand' and 'Collapse' buttons, 'Close' button, and resize handles.

PasswordInput

• Added data-dt-properties attribute to the 'Show password' and 'Hide password' buttons.

SegmentSelector

• Added data-dt-properties attribute to the 'Pin' and 'Unpin' buttons, and the 'Show more' and 'Show less' buttons.

Select

• Added data-dt-properties attribute to the 'Select all' control.

Sparkline

• Chart width is now consistent between rows regardless of whether context values contain negative numbers. A fixed sign column is always reserved so the chart area does not shift. (APPDEV-16895)

Tabs

• Page no longer scrolls when you click on a tab. (APPDEV-16831)

TimeframeSelector

• The value of the TimeframeSelector can now still be adjusted after selecting everything with Cmd/Ctrl+a. (APPDEV-16861)
• You can now move between DateTimeInput values with the arrow keys. When typing numbers, focus switches to the next spin-button segment as soon as the current one is complete. (APPDEV-16126)
• Added data-dt-properties attribute to the 'Apply' button, preset timeframes, and recent timeframes.
• Now supports clearing the selected value via a built-in 'Clear' button. (APPDEV-16374)
• Improved support for pasting ISO timestamps or timeframes. Additionally, there's now the possibility to undo after pasting. (APPDEV-16124)

TimeseriesChart

• Setting indicatorsDisplay: 'auto' on an annotation marker now correctly overrides a track-level always configuration, so that all marker-level values (auto, never, always) take precedence over the track-level configuration. (APPDEV-17153)

ToggleButtonGroup

• Removed redundant aria-checked attribute from the radio input to resolve an accessibility conflict (WCAG 4.1.2). (APPDEV-16861)
• Added data-dt-name attribute to the toggle item.

TreeMap

• The width of the treemap tooltip is now limited, as with the other charts. (APPDEV-16905)

XYChart

• Fixed a bug that caused series with the id '0' to not be able to be highlighted.
• Setting indicatorsDisplay: 'auto' on an annotation marker now correctly overrides a track-level always configuration, so that all marker-level values (auto, never, always) take precedence over the track-level configuration. (APPDEV-17153)
• The default tooltip in explore mode got an updated layout, refreshed visual design, and performance improvements. (APPDEV-16266)

3.2.2

Updates

FilterField

• Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.2.1

Updates

General

• Updates DTFlow to not use font auto hinting on the font and improve legibility.

3.2.0

Dependency updates

• @dynatrace/strato-icons was updated to version 2.1.1.

Deprecations

AppHeader

• Deprecated AppHeader.AppNavLink (use AppHeader.Logo), AppHeader.NavItems (use AppHeader.Navigation), AppHeader.NavItem (use AppHeader.NavigationItem), and AppNavLinkInternalOwnProps. (APPDEV-12515)

Updates

General

• Reduced motion media query now overrides timings on tokens. (APPDEV-17018)
• DTFlow version 1.2 is now used. (APPDEV-16887)

Charts

• Meter bars tooltip now appears also on grayed area. (APPDEV-16799)
• Meter bars supports now unit, width and height. (APPDEV-15934)
• Toolbar now supports behavioral tracking props. (APPDEV-16378)
• After triggering a series actions its corresponding item gets the highlighting removed. (APPDEV-16665)

Overlays

• Add support for behavior tracking props on overlay components. (APPDEV-16801)

Accordion

• Added data-dt-name attributes to the section trigger and section header. (APPDEV-16670)

AppHeader

• AppHeader.Logo now accepts a releasePhase prop. Setting releasePhase="preview" displays a "Preview" chip next to the app name, allowing apps to communicate their release phase to users. (APPDEV-16591)
• Added data-dt-name attribute to the app icon. (APPDEV-16671)

CategoricalBarChart

• CategoricalBarChart now supports behavioral tracking properties (APPDEV-16515)

CodeEditor

• The line-number gutter no longer disappears when the gutter marker is placed at an out-of-bounds line number. (APPDEV-16705)

CodeSnippet

• No longer crashes on very large inputs. Syntax highlighting is now limited to the first 100,000 characters; content beyond that is rendered as plain text without syntax highlighting or dynamic line breaks. (APPDEV-16797)
• Added data-dt-name attribute to the copy button. (APPDEV-16670)

DataTable

• Selecting text inside the table no longer triggers row activation. (APPDEV-16654)
• The event passed to onActiveRowChange is now a click event (previously pointerup); middle mouse button clicks pass an auxclick event. (APPDEV-16654)
• Scrollable tables now keep correct row heights when lineWrap is enabled and previously virtualized rows scroll back into view. (APPDEV-16699)
• Added data-dt-name attributes to the toolbar line wrap button and the column line wrap action. (APPDEV-16670)
• Columns no longer resize when hovering a header with column actions in a condensed or comfortable table. (APPDEV-16981)
• Column widths for already measured columns are persisted when columns reference changes. This fixes an issue with columns not being rendered correctly, after the columns reference changed in a horizontally scrolled table. (APPDEV-16792)

DateTimePicker

• Added data-dt-name attributes to the button opening the calendar, and the calendar's header, day, month, year, and stepper buttons. (APPDEV-16671)
• The relative TimeValue now supports spinning values with the ArrowUp and ArrowDown keys. Pressing ArrowUp increments the numeric part of the expression (e.g. now-2h → now-1h), and ArrowDown decrements it. (APPDEV-16136)

DonutChart

• DonutChart now supports behavioral tracking props. (APPDEV-16600)

DQLEditor

• Added data-dt-name attribute to autocomplete suggestion items and the "Learn more" link. (APPDEV-16670)

ExpandableText

• Added data-dt-name attributes to the show more and show less buttons. (APPDEV-16670)

FeatureHighlight

• Added data-dt-name attribute to the close button. (APPDEV-16670)

FilterBar

• data-dt-name attribute is now available on the "Add filter" button. (APPDEV-16603)

FilterField

• Fixed onFilter being incorrectly called when the clear button is clicked (APPDEV-16623)
• Silently handle missing pinned or recent filter state instead of logging an error warning. (APPDEV-16875)
• Suggestions are now automatically sorted by match relevance (exact → starts-with → contains-middle → ends-with). Key and value suggestions are sorted alphabetically or in ascending order within each group. Key and value suggestion sorting can be disabled by setting sortSuggestions: false on the validatorMap, keeping the original order of the suggestions while still sorting by relevance once the user starts typing. (APPDEV-15956)

GaugeChart

• GaugeChart now supports behavioral tracking props. (APPDEV-16600)

HelpMenu

• Added data-dt-name attributes to the menu trigger and icon. (APPDEV-16671)

HistogramChart

• HistogramChart now supports behavioral tracking properties (APPDEV-16515)
• Now the prop width for the histogram accepts CSS string values (e.g., "100%", "500px") in addition to numeric values. (APPDEV-15226)

Menu

• Stop calling the SDK function getIntentLink twice when the Menu.Intent component is rendered. (PAPA-32034)

MessageContainer

• Due to a guideline change, using MessageContainer.Title as the sole content slot is no longer valid, every MessageContainer must now include a MessageContainer.Description. If you previously presented content using only MessageContainer.Title, move that content to MessageContainer.Description instead. If both a title and a description are appropriate, keep both slots. With this change, Actions now remain on the same line as the Description if they fit the available space; otherwise, they wrap to the next line. (APPDEV-12784)

MeterBarChart

• MeterBarChart now supports behavioral tracking props. (APPDEV-16600)

Microguide

• Added data-dt-name attributes to the close, back, next, and got it buttons. (APPDEV-16670)

Modal

• Added data-dt-name attribute to the close button. (APPDEV-16671)

MultiMeterBarChart

• MultiMeterBarChart now supports behavioral tracking props. (APPDEV-16600)

Page

• Added data-dt-name attributes to expand/collapse, open, and close buttons, as well as the resize handler of the sidebar and detail view panels. (APPDEV-16671)

PasswordInput

• Added data-dt-name attribute to the button for showing and hiding the password. (APPDEV-16671)

PieChart

• PieChart now supports behavioral tracking props. (APPDEV-16600)

ReleasePhaseIndicator

• Introduces the ReleasePhaseIndicator component. Use it to communicate the release phase of a feature by rendering a pre-configured Chip based on the phase prop ('preview', 'new', or 'deprecated'). (APPDEV-16670)

SegmentSelector

• data-dt-name attribute is now available on the following interactive elements: recent/pinned segments, clear all, apply, manage segments, pin/unpin, add segments, and remove segment buttons and "Learn more about segments" link. (APPDEV-16603)
• The SegmentSelector doesn't close when deselecting a segment variable. (APPDEV-16678)

Select

• The Select.Filter input now has an aria-label set to comply with accessibility standards. (APPDEV-16713)
• Added data-dt-name attribute to the "Select All" element. (APPDEV-16671)

TimeframeSelector

• The relative TimeValue now supports spinning values with the ArrowUp and ArrowDown keys. Pressing ArrowUp increments the numeric part of the expression (e.g. now-2h → now-1h), and ArrowDown decrements it. (APPDEV-16136)
• After selecting a timeframe via the Calendar, the focus is now moved to the time input of the start date. (APPDEV-16131)
• data-dt-name attribute is now available on the following interactive elements: recent/preset timeframes, steppers, calendar and apply buttons, and "Learn more" link. (APPDEV-16603)

TimeseriesChart

• TimeseriesChart now supports behavioral tracking properties (APPDEV-16515)
• the width prop now accepts CSS unit strings like "100%" or "500px" in addition to numeric pixel values. (APPDEV-15225)

Toast

• Added data-dt-name attribute to the close button. (APPDEV-16671)

TreeMap

• TreeMap now supports behavioral tracking props. (APPDEV-16600)

XYChart

• XYChart now supports proper nice ticks for any unit format (APPDEV-16140)
• XYChart now supports behavioral tracking properties (APPDEV-16515)
• numerical axes with unit-converting formatters now produce round, human-readable tick values in the target unit as GiB (APPDEV-14514)

3.1.5

Updates

FilterField

• Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.1.4

Updates

SegmentSelector

• The SegmentSelector doesn't close when deselecting a segment variable. (APPDEV-16678)

3.1.3

Updates

DataTable

• Table no longer crashes due to the row virtualizer attempting to measure detached DOM elements. (APPDEV-16862)

3.1.2

Updates

DataTable

• No longer spreads configuration props to DataTable DOM element.

3.1.1

Updates

FilterField

• Reduce number of requests for recent and pinned filters. (APPDEV-16748)

3.1.0

Dependency updates

• @dynatrace/strato-icons was updated to version 2.1.0.

Deprecations

AiLoadingIndicator

• The aria-disabled prop is deprecated, as the attribute is only intended for interactive elements.

DataTable

• Column type date is now deprecated. Use datetime instead. (APPDEV-4005)

• The onDownloadData on the DataTable element is now deprecated. Please use it via the DataTable.DownloadData toolbar slot instead. (APPDEV-16234)

TimeframeSelector

• The _isSelected prop on the TimeframeSelector.PresetItem slot is now deprecated. (APPDEV-16158)

Updates

General

• All components in content, editors, notifications, tables and typography now expose className, style, data-testid, data-dtrum-mask and data-dtrum-allow. Additionally, all remaining props are forwarded to the root of the component. (APPDEV-16251)
• Behavior tracking attributes are now supported in all components in content, tables, editors, notifications, and typography, as well as in the Overlay and Tooltip component. (APPDEV-16246)

Charts

• Applied a more performant width/height/truncation method to Honeycomb, Pie, Donut, Treemap, Sparkline, and Single Value. (APPDEV-15420)
• The chart legend only shows an outline when the navigation is done via the keyboard. (APPDEV-16596)
• Fixed magnifier to dynamically round values based on the value per pixel. (APPDEV-16624)

Overlays

• Possibly overlapping overlays are now closed when focusing the FilterField. (APPDEV-16114)

AnnotationsChart

• Fixed annotation marker symbols in the tooltip not being visible on dark theme. (APPDEV-16715)
• Fixed an issue where icon symbols set via the symbol prop on the markers would disappear after programmatically changing indicatorsDisplay or any other prop that triggers a component re-render. (APPDEV-16647)

CategoricalBarChart

• The width prop now accepts CSS string values (e.g., "100%", "500px") in addition to numeric values.

convertToColumns

• Now maps timestamp and timeframe fields to datetime column type instead of the deprecated date. (APPDEV-4005)

DataTable

• Datetime columns now accept date, time, or datetime as shorthand formatter values, making it easy to show only the date or time portion without providing full FormatDateOptions. (APPDEV-4005)
• The scrollToRow method now supports an additional align parameter (start, center, end) to control where the target row is positioned within the table’s visible area. Defaults to start. (APPDEV-14431)
• The onDownloadData callback is now available on the DataTable.DownloadData toolbar slot. (APPDEV-16234)
• Batch selection now handles changing data and selection across multiple tables correctly. (APPDEV-16683)
• Sparkline columns allow configuration of the xAxis. (APPDEV-13820)
• Adds data-dt-name tracking attributes to more interactive elements: sorting/ordering header cells and sorting icons, row selection and subrow expand/collapse buttons, column resize and row drag-and-drop handles, and column settings modal controls. (APPDEV-16589)
• Pressing Enter on an interactive element within a row (e.g. a button) no longer activates or deactivates the row. This aligns keyboard behavior with mouse behavior. (APPDEV-16586)

DateTimePicker

• No longer shows a transition animation when navigating between date and time spin buttons so that the selection highlight switches instantly. (APPDEV-16135)

DonutChart

• width prop now accepts string values and the unit for the data accepts Unit type, SliceUnit deprecated. (APPDEV-15409)

FilterField

• The validatorMap now supports displayValue and details on keys and values, enabling richer suggestions with labels and descriptions. (APPDEV-16298)
• All filter field suggestions are now flattened in the DOM to support virtualization for individual items of suggestion groups. A11y is still ensured using aria attributes to link items to groups. (APPDEV-10064)
• Custom validation types can now be defined via the customTypes prop, allowing type-specific value constraints to be used in the validatorMap. (APPDEV-16028)
• No longer incorrectly marks values inside an in() operator as invalid when the key is configured with a special type (e.g. IPAddress, UID, Timestamp, SmartscapeId) in the validatorMap. (APPDEV-16555)

FormField

• Validation now automatically updates when validation-related props (like required) change dynamically. (APPDEV-16103)

GaugeChart

• The seriesActions callback's series parameter type now includes GaugeChartData to reflect that the actual value passed at runtime can also be an object. (APPDEV-16790)
• Tooltip hover area is now constrained to the visible gauge arc and labels, preventing the tooltip from appearing over empty space around the chart. (APPDEV-16692)
• Now the GaugeChart supports units. (APPDEV-15935)

HoneycombChart

• HoneycombChart now supports behavioral tracking properties. (APPDEV-16377)

NumberInput

• NumberInput is now deprecated in favor of NumberInputV2.

NumberInputV2

• Introduce NumberInputV2. NumberInputV2 aligns with the current forms architecture and delivers more consistent input behavior across Strato form controls.

API changes to consider when migrating:

• min and max now accept number | undefined (previously number | string | undefined).
• Parsing/formatting is stricter and locale-aware, including intermediate input states and paste normalization.
• step vs stepMultiplier: - step defines the valid value interval for validation and the base increment/decrement amount (for example step={0.5} only allows values aligned to 0.5 and steps by 0.5). - stepMultiplier is a positive integer multiplied by step (or 1 if no step is set) to determine how much the value changes when using arrow keys, the scroll wheel, or the stepper buttons. - You can combine both: e.g. step={0.5} to validate allowed values and stepMultiplier={4} to increment/decrement by 2. (APPDEV-3996)

Overlay

• Fixed empty aria-labelledby attribute being rendered when no label is provided, which violated accessibility guidelines. (APPDEV-16714)

PieChart

• width prop now accepts string values and the unit for the data accepts Unit type, SliceUnit deprecated. (APPDEV-15409)

Radio

• Remove redundant aria-checked attribute from native radio inputs to fix accessibility violation. (APPDEV-16711)

SegmentSelector

• Add default aria-label which is also shown in an empty compact SegmentSelector. (APPDEV-16433)

Select

• Select now has a minWidth set when contentWidth is content and a Filter.Filter is present, preventing the SearchInput from becoming too narrow. (APPDEV-16635)

SingleValue

• SingleValue now supports behavioral tracking properties. (APPDEV-16377)

SingleValueGrid

• SingleValueGrid now supports behavioral tracking properties. (APPDEV-16377)
• seriesActions now receives the full data record for each item, including all custom fields, instead of only value and label. (APPDEV-16619)

Sparkline

• Sparkline now supports behavioral tracking properties. (APPDEV-16377) (APPDEV-16377)
• Fixed a crash in Sparkline area charts where the canvas gradient fill would throw a SyntaxError when the browser returned an HSLA color string. (APPDEV-16726)

TimeframeSelector

• Recently used timeframes are now displayed in the overlay. (APPDEV-16158)
• Fixed a race condition that could sporadically show Start time must be before end time. while typing in the end time field. (APPDEV-16690)
• No longer shows a transition animation when navigating between date and time spin buttons so that the selection highlight switches instantly. (APPDEV-16135)
• When applying a timeframe with one empty field, it is now filled with "Now". (APPDEV-16130)

ToggleButtonGroup

• Styles for aria-disabled are now correctly applied. (APPDEV-16682)

TreeMap

• ColorRules now work consistently regardless of nameAccessor value. (APPDEV-16559)
• The width prop now accepts string or number and also added an unit prop. (APPDEV-15408)

XYChart

• AreaSeries is now available in the strato package. (APPDEV-15176)
• The width prop now accepts CSS string values (e.g., "100%", "500px") in addition to numeric values.
• Added legend filtering and actions for series and rect categorical interactions by default. (APPDEV-15180)
• Fixed tooltip to show the topmost overlapping series instead of the first one. (APPDEV-16253)

3.0.3

Updates

FilterField

• Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.0.2

Updates

DataTable

• Table no longer crashes due to the row virtualizer attempting to measure detached DOM elements. (APPDEV-16862)

3.0.0

Breaking changes

Button

• Removed the deprecated readOnly property. (APPDEV-13937)

Dependency updates

• @dynatrace/strato-icons was updated to version 2.0.0.
• Added @dynatrace-sdk/units as a peer dependency with version range ^1.5.0. (APPDEV-10467)
• Changed peerDependency version range for @dynatrace-sdk/navigation from ^1.3.0 || ^2.0.0 to ^2.1.0. (APPDEV-10467)

Updates

ToggleButtonGroup

• Fixed a react warning about missing keys on each child.

3.0.0-rc.0

1.18.0

Dependency updates

• @dynatrace/strato-icons was updated to version 1.13.0.

Updates

General

• Fixed broken links in the documentation. (PRODUCT-9394)

1.17.0

Updates

Core

• useFocusRing hook is now available to apply custom focus styles to components. (APPDEV-14256)

IntentButton

• Deprecated IntentButtonProps as they will be replaced by the IntentButtonProps from strato-components-preview.

1.16.1

Updates

Core

• Adds the Behavioral Tracking Props interface to the API. (APPDEV-15861)

1.16.0

Dependency updates

• @dynatrace/strato-icons was updated to version 1.12.0.
• @dynatrace/strato-design-tokens was updated to version 1.3.1.

Deprecations

IntentButton

• The IntentButton will be removed from this package. Use the IntentButton from @dynatrace/strato-components-preview instead. The preview version offers feature parity but introduces slight differences in the API. The IntentButton now accepts a configuration object. It also supports multiple intents. Configure additional intents using the IntentButton.Item. They're shown in a customisable OpenWith overlay component. (APPDEV-15713)

Updates

ExternalLink

• Copying the link text no longer copies a zero width no-break space. (APPDEV-15655)
• No longer overflows vertically or shows a scrollbar when used in flex layouts where the text’s line height equals its font size. (APPDEV-15678)

TextEllipsis

• The Intl.Segmenter will now be created only when needed and not on import. (APPDEV-15823)

1.15.0

Dependency updates

• @dynatrace/strato-icons was updated to version 1.11.1.
• @dynatrace/strato-design-tokens was updated to version 1.3.0.

Updates

Highlight

• Now uses CSS Custom Highlight API instead of the <mark> HTML element. (APPDEV-14731)

1.14.0

Dependency updates

• @dynatrace/strato-icons was updated to version 1.11.0.

Updates

AppRoot

• Added translationsRootPath to props of AppRoot to configure language resource path. (APPDEV-15400)

ExternalLink

• Now respects custom textDecoration styles. (APPDEV-15438)

Link

• Now respects custom textDecoration styles. (APPDEV-15438)

1.13.0

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 1.2.0.
• @dynatrace/strato-icons was updated to version 1.10.0.

1.12.0

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 1.1.4.
• @dynatrace/strato-icons was updated to version 1.9.0.
• Changed peerDependency version range for @dynatrace-sdk/units from ^1.0.2 to ^1.3.1. (APPDEV-14636)

Updates

General

• Slowed animation timings for the ProgressBar, ProgressCircle, Skeleton, and SkeletonText components. (APPDEV-14758)

Skeleton

• Improved animations. (APPDEV-14760)

SkeletonText

• Improved animations. (APPDEV-14760)

1.11.0

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 1.1.3.
• @dynatrace/strato-icons was updated to version 1.8.0.

Updates

General

• A useId hook is now provided, allowing css-ident safe IDs to be generated. (APPDEV-14808)

AppRoot

• The look and feel of scrollbars in Firefox is now aligned with the experience in Chrome.

Link

• The underline now appears correctly based on whether the link is focused via keyboard. (APPDEV-14816)

1.10.0

Dependency updates

• @dynatrace/strato-icons was updated to version 1.7.0.
• @dynatrace/strato-design-tokens was updated to version 1.1.2.

1.9.2

General

• Unicode ranges for Roboto fallback are now removed.

1.9.1

Dependency updates

• @dynatrace/strato-icons was updated to version 1.6.1.
• @dynatrace/strato-design-tokens was updated to version 1.1.1.

General

• Font definitions are now directly added to the apps css bundle.

ExternalLink

• The underline of the link is now displayed correctly based on whether it is focused via keyboard. (APPDEV-14521)

1.9.0

FocusScope

• The prop data-testid can now be set on the component. (APPDEV-13925)

1.8.1

TextEllipsis

• When truncationMode is set to start, punctuation characters are now rendered correctly at the start of the string. (APPDEV-14072)

1.8.0

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 1.1.0.
• @dynatrace/strato-icons was updated to version 1.6.0.

1.7.3

Typography

• Removes canvas from DOM. (APPDEV-13639)

1.7.2

Typography

• Removed canvas from DOM. (APPDEV-13639)

1.7.1

Dependency updates

• @dynatrace/strato-icons was updated to version 1.5.1.

1.7.0

Core

• Removed internal _isStringChildren, _useId, _uuidv4, and _mulberry32 utility. (APPDEV-12775)

TextEllipsis

• truncationMode="middle" now fully supports emoji characters. (APPDEV-13186)
• TruncationMode is now available as a public type. (APPDEV-12065)

1.6.2

Core

• Add internal _isStringChildren, _useId, _uuidv4, and _mulberry32 back for 1.6.x compatibility. (APPDEV-13282)

1.6.1

• Documentation update

1.6.0

Dependency updates

• Changed peerDependency version range for @dynatrace-sdk/navigation from ^1.3.0 to ^1.3.0 || ^2.0.0.
• @dynatrace/strato-icons was updated to version 1.5.0.

1.5.0

Dependency updates

• Changed peerDependency version range for react-intl from ^6.0.8 to ^6.0.8 || ^7.0.0.
• @dynatrace/strato-design-tokens was updated to version 1.0.1.
• @dynatrace/strato-icons was updated to version 1.4.0.

Button

• Hover animation was updated to be more responsive. (APPDEV-12827)

Highlight

• Now preserves whitespace around the highlighted term. (APPDEV-12895)

TextEllipsis

• When truncationMode is set to start, punctuation characters are now rendered correctly at the end of the string. (APPDEV-12900)

1.4.0

Dependency updates

• @dynatrace/strato-icons was updated to version 1.3.0.

Highlight

• Added support for using FormattedMessage within the Highlight component. (APPDEV-12687)
• Highlighted text reflows correctly when wrapped inside a smaller container. (APPDEV-12666)

1.3.0

Dependency updates

• @dynatrace/strato-icons was updated to version 1.2.0.

1.2.0

Highlight

• Whitespaces are preserved when the Highlight component is rendered inside an element styled with display: 'flex'. (APPDEV-12362)

Surface

• Now uses correct selected border with a 2px transparent gap. (APPDEV-11985)

1.1.0

Dependency updates

• @dynatrace/strato-icons was updated to version 1.1.0.

TextEllipsis

• Text with ellipsis with truncationMode="middle" can grow when resizing. (APPDEV-11597)

1.0.0

Breaking changes

General

• Removed deprecated testing subpackage. Please use the @dynatrace/strato-components-testing package now. (APPDEV-9460)

In the new package we are no longer re-exporting parts of the @testing-library package. This means you'll have to import functions like screen, userEvent, act, waitFor etc directly from @testing-library and its subpackages.

The render function is still exported in the testing package, as it makes testing strato components easier.

For more information on how to setup and use @dynatrace/strato-components-testing please look into package's readme.

Core

• roleVariants and RoleVariantType are now removed, as they are no longer used. (APPDEV-11235)

ProgressBar

• Removed the variant prop, as the color and variant are now derived from the container. The color can still be overwritten with the color prop.(APPDEV-11668)

ProgressCircle

• Removed the variant prop, as the color and variant are now derived from the container. The color can still be overwritten with the color prop.(APPDEV-11668)

Dependency updates

• Changed peerDependency version range for @dynatrace-sdk/app-environment from ^1.0.0 to ^1.1.0. (APPDEV-11243)
• Changed peerDependency version range for @dynatrace-sdk/navigation from ^1.2.1 to ^1.3.0. (APPDEV-11243)
• Changed peerDependency version range for @dynatrace-sdk/error-handlers from ^1.0.0 to ^1.3.1. (APPDEV-11243)
• Changed peerDependency version range for @dynatrace-sdk/user-preferences from ^1.1.0 to ^1.1.1. (APPDEV-11243)
• @dynatrace/strato-design-tokens was updated to version 1.0.0.
• @dynatrace/strato-icons was updated to version 1.0.0.

0.85.120

TextEllipsis

• Text now displays correctly in Firefox when the parent container has max-width: max-content. (APPDEV-12006)

0.85.110

Deprecations

Button

• Deprecated readOnly prop, please use disabled instead. (APPDEV-11549)

General

• useBreakpoint hook now has better SSR support.

Content

• ProgressBar and ProgressCircle now inherit the Container's color, if used inside it.

Core

• Added FocusScope component. (APPDEV-11591)

0.85.100

Dependency updates

• @dynatrace/strato-icons was updated to version 0.39.4.

Deprecations

Content

• Deprecated the variant prop from ProgressBarProps and ProgressCircleProps, which will be removed in favor of the color prop.

Core

• Deprecated the RoleVariantType, which will be removed. You can use 'neutral' | 'primary' | 'success' | 'warning' | 'critical' instead, as the onAccent option will be dropped.

Typography

• CSS text ellipsis from a wrapping element is now correctly applied to the Link and ExternalLink component. (APPDEV-11491)

0.85.90

Dependency updates

• Added @dynatrace/strato-design-tokens as a peer dependency with version range ~0.20.0.
• Added @dynatrace/strato-icons as a peer dependency with version range ~0.39.0.

General

• Moved @dynatrace/strato-design-tokens and @dynatrace/strato-icons to peerDependencies and relaxed the version range. (APPDEV-9911)
• Classnames for components now contain a version number to avoid conflicts if apps happen to have more than one version of the design system running.

0.85.80

ExternalLink

• The ExternalLink's icon now remains on the same line as its preceding word, even when there are line breaks.

IntentButton

• Now accepts ReactNode as children instead of only strings.

TextEllipsis

• Now onTextOverflow is also called when TextEllipsis is used inside another component that already handles text truncation.

0.85.70

Deprecations

General

• Testing subpackage exports are now marked as deprecated. Please use @dynatrace/strato-components-testing instead.

0.85.60

Dependency updates

• @dynatrace/strato-icons was updated to version 0.39.3.

0.85.50

Typography

• Heading and Paragraph now inherit their color from their container by default.

0.85.41

Layouts

• Annotate exported styles accordingly.

0.85.40

General

• Added missing vanilla-extract dependencies to the package.

Button

• Displays number 0 when used as child.

0.85.32

• Documentation update

0.85.31

Dependency updates

• Added missing vanilla-extract dependencies to the package.

0.85.30

Dependency updates

• @dynatrace/strato-icons was updated to version 0.39.2.

UseBreakpoint

• useBreakpoint has been moved from @dynatrace/strato-components-preview/core to @dynatrace/strato-components/layouts and a migration script has been provided.

0.85.21

• Documentation update

0.85.20

IntentButton

• IntentButton has been moved from @dynatrace/strato-components-preview/buttons to @dynatrace/strato-components/buttons. The iconOnly prop has been removed. To display only the icon, leave the label empty.

Skeleton

• Skeleton has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/content and a migration script has been provided.

SkeletonText

• SkeletonText has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/content and a migration script has been provided.

Surface

• Surface has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/layouts and a migration script has been provided.

0.85.11

• Documentation update

0.85.10

Dependency updates

• @dynatrace/strato-icons was updated to version 0.39.1.
• @dynatrace/strato-design-tokens was updated to version 0.20.40.

Button

• Button has been moved from @dynatrace/strato-components-preview/buttons to @dynatrace/strato-components/buttons and a migration script has been provided.

0.85.0

Breaking changes

General

• Drop react 17 support.
• Drop @testing-library/react 12 support.
• Drop @testing-library/user-event 13 support.

Dependency updates

• @dynatrace/strato-icons was updated to version 0.39.0.

General

• Add @testing-library/react 15 support.

0.84.51

General

• Content subpackage is now exported from the @dynatrace/strato-components entrypoint.

0.84.50

Dependency updates

• @dynatrace/strato-icons was updated to version 0.38.0.

Container

• Container has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/layouts and a migration script has been provided.

Flex

• Flex has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/layouts and a migration script has been provided.

Grid

• Grid has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/layouts and a migration script has been provided.

ProgressBar, ProgressCircle

• ProgressBar and ProgressCircle have been moved from @dynatrace/strato-components-preview/core to @dynatrace/strato-components/content and a migration script has been provided.

0.84.42

• Documentation update

0.84.41

• Documentation update

0.84.40

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 0.20.30.

Typography

• Typography is migrated from @dynatrace/strato-components-preview/typography to @dynatrace/strato-components/typography and a migration script has been provided.

Divider

• Divider has been moved from @dynatrace/strato-components-preview/typography to @dynatrace/strato-components/layouts and a migration script has been provided.

0.84.31

• Documentation update

0.84.30

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 0.20.20.

0.84.21

• Documentation update

0.84.20

0.84.12

• Documentation update

0.84.11

Dependency updates

• @dynatrace/strato-design-tokens was updated to version 0.20.10.
• @dynatrace/strato-icons was updated to version 0.37.0.

AppRoot

• AppRoot component was moved from @dynatrace/strato-components-preview.