Skip to main content

Components - Release notes

  • Release notes

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.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.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