Skip to main content

Components - release notes

  • Release notes

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)
  • 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)
  • 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.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)
  • 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.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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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​

  • 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)
  • Now respects custom textDecoration styles. (APPDEV-15438)
  • 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.
  • 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.
  • 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​

  • 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.
Still have questions?
Find answers in the Dynatrace Community