Skip to main content

Components preview - Release notes

  • Release notes
Caution

Important: The @dynatrace/strato-components-preview package will be deprecated and removed. As of version 3.0.0, the feature set of the preview package has been merged into @dynatrace/strato-components. Please update your projects to use @dynatrace/strato-components and consult the components changelog for details.

3.0.0​

Breaking changes​

General​

  • Removed the deprecated Conversion-Utilities package. The following exports are no longer available: (APPDEV-11744)
    • convertToSingleValueData
    • SingleValueData
    • listRecordFields
    • pickRecordIndex
    • EMPTY_SINGLE_VALUE_DATA
    • DQLResultConverter
    • DQLResultConverterProps
    • DQLResultConverterBaseProps
    • DQLResultConverterTimeseriesProps
    • DqlNumberType
    • formatDqlNumber
    • ConversionCellValue
    • recommendVisualizations
    • VisualizationRecommenders
    • VisualizationRecommendersProps
    • VisualizationRecommenderResult
    • VisualizationKind
    • VisualizationKindOptions
    • _getMetadataMetricsUnitForFieldName
    • Dimension
    • getDimensions
    • checkTimeseriesFormat
    • FieldEntry
    • convertToFieldEntries
    • getTypesForRecordIndex
    • getFieldsArrayForRecordIndex
    • convertToTimeseriesBand
    • TimeseriesWithDimensions
    • convertToTimeseries
    • convertQueryResultToTimeseries
    • convertToColumnsV2

Core​

  • Removed the aliased TimeframeV2 type export. Please use Timeframe instead. (APPDEV-14406)

Formatters​

  • Formatters subpackage is now removed. Use the formatter utilities provided by @dynatrace-sdk/units instead. (APPDEV-12477)

Overlays​

  • FeatureHighlight, Microguide, TerminologyOverlay, and InformationOverlay, and their associated props and types, are now removed from the Overlays package. Import them from the Content package instead. (APPDEV-11943)

AnnotationsChart​

  • Removed deprecated StandaloneAnnotationsChartProps interface. All props from StandaloneAnnotationsChartProps have been merged into AnnotationsChartProps. Use AnnotationsChartProps instead. (APPDEV-15122)
  • Removed deprecated TextOverflowExpandOptions and TextOverflowTruncateOptions interfaces. Use TextOverflowOptions type directly with the textOverflow and truncateMode props on AnnotationsChartProps instead. (APPDEV-15122)

CategoricalBarChart​

  • Removed CategoricalBarChart.Threshold slot, CategoricalBarChartThresholdProps type and thresholds key from chart configuration. (APPDEV-14306)

DataTableV2​

  • The DataTableV2 and all its corresponding types and slots are now removed. Please use DataTable instead. (APPDEV-13694)
  • Removed the deprecated DataTableV2CellInteractionPattern feature flag. (APPDEV-12064)

FilterField​

  • FilterFieldLogicalOperatorNode and SimpleFilterFieldLogicalOperatorNode are no longer exposed in the public API. (APPDEV-13773)
  • Removed suggestionType prop from FilterFieldSuggestionsCallback. Use suggestionTypes instead. (APPDEV-15106)
  • Removed autoSuggestions from FilterFieldSuggestionsCallback as they should only be handled internally and not changed or updated manually. (APPDEV-15106)
  • Removed deprecated operator prop from FilterFieldStatementNode. Please use comparisonOperator instead. (APPDEV-15574)
  • Removed syntax prop. FilterField now only supports complex mode. (APPDEV-13114)
  • Removed deprecated currentToken prop from FilterFieldSuggestionCallback. (APPDEV-15712)

GaugeChart​

  • Removed GaugeChart.Threshold slot, GaugeChartThresholdProps type and thresholds key from chart configuration. (APPDEV-14306)

HistogramChart​

  • Removed HistogramChart.Threshold slot, HistogramThresholdProps type and thresholds key from chart configuration. (APPDEV-14306)
  • Removed deprecated Menu.ItemIcon component, use Menu.Prefix or Menu.Suffix instead. (APPDEV-15592)
  • Updated IntentWithoutResponse ref type to HTMLAnchorElement. (APPDEV-14462)

MeterBarChart​

  • Removed MeterBarChart.Threshold slot, MeterBarChartThresholdProps type and thresholds key from chart configuration. (APPDEV-14306)
  • Removed the deprecated Icon slot. (APPDEV-14104)

MultiMeterBarChart​

  • Removed the deprecated Icon slot. (APPDEV-14104)

SegmentSelector​

  • Forwarded ref type has been changed from FormControlWithOverlayRef to SegmentSelectorRef, which includes an async validate function. (APPDEV-15405)

Select​

  • Removed internal defaults for all data-testid attributes. (APPDEV-14554)

SelectV2​

  • Removed compatibility re-export of SelectV2. (APPDEV-14405)

SimpleTableV2​

  • The SimpleTableV2 has been renamed to SimpleTable. (APPDEV-13694)

SingleValue​

  • Removed thresholds type from SingleValueBaseProps and SingleValueConfigProperties. (APPDEV-14306)

SingleValueGrid​

  • Removed thresholds type from SingleValueGridProps. (APPDEV-14306)

Sparkline​

  • Removed Sparkline.Threshold slot and SparklineThresholdProps type. (APPDEV-14306)

TimeframeSelector​

  • Removed the deprecated TimeframeSelector from @dynatrace/strato-components-preview/forms. Import it from @dynatrace/strato-components-preview/filters instead. (APPDEV-16166)

TimeseriesChart​

  • Removed the deprecated GapPolicy type. (APPDEV-15070)

  • Removed TimeseriesChart.Threshold slot, TimeseriesChartThresholdProps type and thresholds key from chart configuration. (APPDEV-14306)

ToggleButtonGroup​

  • Removed the deprecated item API and exports. Use the exports from @dynatrace/strato-components-preview/forms. (APPDEV-14381)

TreeMap​

  • The deprecated ValueAccessor type is now deleted. (APPDEV-16151)

useFilteredData​

  • Changed type from any to unknown in the function signature. (APPDEV-16313)

XYChart​

  • Removed the deprecated CanvasShapeType and POINT_SHAPES. (APPDEV-14063)

  • Remove XYChart.Threshold slot, XYChartThresholdProps type and thresholds key from chart configuration. (APPDEV-14306)

Dependency updates​

  • Changed peerDependency version range for @dynatrace-sdk/units from ^1.4.2 to ^1.5.0. (APPDEV-10467)
  • @dynatrace/strato-components was updated to version 3.0.0.
  • @dynatrace/strato-icons was updated to version 2.0.0.

Deprecations​

Forms​

  • The TimeDetails type has been deprecated, please use the TimeValue instead. (APPDEV-16487)

  • The TimeframeDetails type has been deprecated, please use the Timeframe instead. (APPDEV-16487)

SearchInput​

  • readOnly prop on prefix and suffix buttons is now deprecated. (APPDEV-13937)

TextInput​

  • readOnly prop on prefix and suffix buttons is now deprecated. (APPDEV-13937)

Updates​

General​

  • Updated the documentation to reflect the merging of the Strato components and components preview packages. (PRODUCT-15188)

3.0.0-rc.0​

2.17.0​

Dependency updates​

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

Deprecations​

Charts​

  • legend deprecate ratio in favor of initial ratio. (APPDEV-16364)

CodeSnippet​

  • The allowCopy prop used to hide the copy button is now deprecated. Please use showCopyAction instead. (APPDEV-5776)

DataTable​

  • The link prop on interactiveRows is deprecated. Use onActiveRowChange instead. (APPDEV-15072)

Updates​

General​

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

Charts​

  • Added initialRatio prop to the legend. (APPDEV-12760)

AiResponse​

  • Adds a fade-in animation to each newly rendered word. (APPDEV-15266)
  • Now exposes a responseState prop that allows for controlling how content is rendered and animated. (APPDEV-15266)

AnnotationsChart​

  • AnnotationsChart now supports behavioral tracking properties. (APPDEV-16379)

AppHeader​

  • AppIcon now correctly encodes app version with special url characters. (APPDEV-16503)

DataTable​

  • The following interactive elements now have data-dt-name attributes. (APPDEV-15888)
    • ToolbarDownloadAll, ToolbarDownloadPage, ToolbarDownloadSelected, ToolbarLineWrap, PaginationPageIndex, PaginationPreviousPage, PaginationNextPage, PaginationPageSize, ColumnActionCopyItem, CellActionCopyItem, ColumnActionLineWrap, ColumnActionMoveLeft, ColumnActionMoveRight, ColumnActionPinLeft, ColumnActionPinRight, ColumnActionUnpin
  • Interactive rows are now activated onPointerUp instead of onPointerDown. (APPDEV-15072)
  • Row heights now correctly shrink after resizing the table width, even when line breaks occur. Previously, heights could remain too large after the initial table load. (APPDEV-16283)
  • Sub-row connector paths are now correctly displayed for the first row on all pages after the first. (APPDEV-16398)
  • Gantt, meter bar, and sparkline columns now align correctly when used as sub-row indicator columns. (APPDEV-9994)

DateTimePicker​

  • Date and time input is now wrapped when spined through with the keyboard. For example, once you reach end of the available days it goes back to the first. (APPDEV-16127)

DateTimeRangePicker​

  • Date and time input is now wrapped when spined through with the keyboard. For example, once you reach end of the available days it goes back to the first. (APPDEV-16127)

DQLEditor​

  • Now highlights the fieldsSnapshot DQL command. (APPDEV-16363)
  • Fuzzy matching overly long suggestions no longer crashes the editor due to an invalid regular expression. (APPDEV-16023)

FilterField​

  • A RangeError is now prevented when applying suggestions. (APPDEV-16305)

HistogramChart​

  • HistogramChart with annotations now supports behavioral tracking properties. (APPDEV-16379)

SearchInput​

  • Width is maintained when clear button appears. (APPDEV-16350)

Sparkline​

  • Sparkline now supports custom unit on context values. (APPDEV-16367)
  • Fixing Context values labels' coloring, considering background color. (APPDEV-16430)
  • Preventing Sparkline context value labels from overlapping. (APPDEV-16373)

TimeframeSelector​

  • The stepper's onChange callback is now debounced to avoid excessive state updates when users rapidly click the forward/backward arrows. The displayed timeframe updates immediately for responsive feedback, while the callback only fires once after 300ms of inactivity. (APPDEV-16345)
  • Fixed Firefox issue where users couldn't type immediately when opening the overlay with an absolute date selected. (APPDEV-16462)
  • Date and time input is now wrapped when spined through with the keyboard. For example, once you reach end of the available days it goes back to the first. (APPDEV-16127)

TimeseriesChart​

  • TimeseriesChart with annotations now supports behavioral tracking properties. (APPDEV-16379)

XYChart​

  • Solved an issue that caused the selection tooltip to truncate text when enough space was available. (APPDEV-16161)
  • XYChart with annotations now supports behavioral tracking properties. (APPDEV-16379)
  • ValueRepresentation is now available in the XYChart. (APPDEV-15469)

2.16.1​

Updates​

IntentButton​

  • No longer logs an error when recommendedAppId or recommendedIntentId intent options are missing. (APPDEV-16530)

2.16.0​

Dependency updates​

  • @dynatrace/strato-components was updated to version 1.17.0.

Deprecations​

Charts​

  • Props downloadData, draggable and intents are deprecated from ChartToolbarConfig type.
  • Type TimeseriesUnit is deprecated. (APPDEV-15228)

HoneycombChart​

  • Prop draggable is deprecated from Honeycomb.Toolbar slot. Toolbar is always draggable.

hooks​

  • The useFocusRing hook exposing styles for styled components is now deprecated. Use the one from @dynatrace/strato-components/core instead. (APPDEV-14256)

MapView​

  • Prop draggable is deprecated from MapView.Toolbar slot. Toolbar is always draggable.

SingleValue​

  • Prop draggable is deprecated from SingleValue.Toolbar slot. Toolbar is always draggable.

XYChart​

  • Prop collapsed is deprecated from XYChart.Toolbar slot.

  • Prop draggable is deprecated from XYChart.Toolbar slot. Toolbar is always draggable.

  • Prop intents is deprecated from XYChart.Toolbar slot. Use XYChart.Intent slot instead.

Updates​

Charts​

  • Removing React warnings about charsFontWidthMap and avoiding invalid DOM attributes. (APPDEV-15870)
  • The API for the toolbar across charts is now standardized. (APPDEV-15963)

CategoricalBarChart​

  • Deprecated CategoricalUnit type. (APPDEV-15228)

DataTable​

  • Columns can now be optionally excluded from CSV downloading. This is possible by providing an array of column IDs either through the excludeColumns property in the DataTable.DownloadData toolbar slot, or an additional argument to the function used for programmatic downloads. The onDownloadData callback will also include these IDs as an array through its excludedColumns property. (APPDEV-11940)
  • Sudden scroll jumps are now prevented when ordering rows via drag and drop in large, scrollable tables. (APPDEV-16181)
  • Row actions buttons in active, condensed rows are now confined within the interactive row border. (APPDEV-16088)

FilterField​

  • When applying a key suggestion inside a group, the cursor now stays within the group. (APPDEV-16222)
  • The validatorMap supports defining commonly used keys as fallbackKey to get statement suggestions with the current token as value. If no operators are specified for the fallbackKey, the matches-phrase operator will be used. (APPDEV-15948)
  • Crashes with long filter statements are now prevented. (APPDEV-16306)
  • The error state of the component is now forwarded to the pin button as well. (APPDEV-16098)
  • Type UID can be enabled in the parserConfig and used in the validatorMap. (APPDEV-13181)
  • Asterisks are now properly escaped when applying a suggestion with the replace-token strategy. (APPDEV-16101)
  • Type Timestamp can be enabled in the parserConfig and used in the validatorMap. (APPDEV-13180)

GaugeChart​

  • Added tooltip and series actions. (APPDEV-15994)

HistogramChart​

  • Fixed a bug where toolbar would remain visible after leaving the chart. (APPDEV-16086)

IntentButton​

  • Added showMenu prop to control whether the dot-menu is displayed, allowing the button to render as an explicit intent without the fallback menu. (APPDEV-15836)

Overlay​

  • Can now consume overlayContainerProps. (APPDEV-16142)

SearchInput​

  • Aligned search functionality in design-system with the new SearchInput component. (APPDEV-15594)

SegmentSelector​

  • The SegmentSelector's settings button is now hidden when readOnly. (APPDEV-15880)

Select​

  • The overlay width now remains fixed while open and is only recalculated when it is closed and reopened. (APPDEV-8707)

SingleValueGrid​

  • Add loading prop support to show a consistent loading overlay across all grid items, aligning with SingleValue. (APPDEV-16163)

Sparkline​

  • Shows both context value indicators (min/max) if showContextValues is enabled. (APPDEV-16333)
  • Context value indicators now correctly align the dotted line with the label text across all chart sizes. (APPDEV-16182)

TimeframeSelector​

  • Daylight saving time transitions are now correctly calculated when using stepper buttons. (APPDEV-16070)

TimeseriesChart​

  • Fixed being unable to select points at the edges of the chart. (APPDEV-16100)
  • Fixed toolbar remaining visible after leaving the chart. (APPDEV-16086)

ToggleButtonGroup​

  • Visual focus ring indicator added for keyboard navigation on selected items. (APPDEV-16215)
  • Correctly display the dividers. (APPDEV-16214)

useFilteredData​

  • The hook useFilteredData now also handles sub-rows. (APPDEV-5576)

XYChart​

  • Fixed being unable to select points at the edges of the chart. (APPDEV-16100)
  • Fixed toolbar remaining visible after leaving the chart. (APPDEV-16086)

2.15.1​

Updates​

DataTable​

  • Column actions menus no longer throw an error when used in tables with sub-rows and custom row IDs. (APPDEV-16300)

2.15.0​

Dependency updates​

  • @dynatrace/strato-components was updated to version 1.16.1.

Updates​

General​

  • Copy actions no longer fail when users lack clipboard permissions. (APPDEV-15973)

Charts​

  • Fixed an issue where explore mode tooltip could be displayed with a selection area. (APPDEV-16167)
  • Deprecated ChartToolbar.DownloadData slot. (APPDEV-15304)
  • The seriesActions prop of charts now accepts custom components (components not of type ChartSeriesAction.{x}). (PAPA-30040)

This change allows composing the menu items using custom React components, which means that menu items can now be rendered conditionally, call hooks, and use async data to fine-tune how the menu is rendered (for example: as resolving part of the menu item name asynchronously).

If you "opt-in" to using custom components in series actions, the menu items are no longer grouped and ordered automatically. You must manually place actions before intents, and place a Divider component between actions and intents.

  • Legend shortcuts (CTRL) are not losing the previous selection. (APPDEV-16089)
  • Deprecated ChartToolbar component. (APPDEV-15303)
  • Solved an issue that caused the web page to freeze when hovering charts on Firefox. (APPDEV-15877)
  • Added char width map for font size 14. Applied more performant truncation method in Axis, Ticks and Magnifiers. (APPDEV-15497)

Editors​

  • Pressing Escape inside an editor is no longer propagated. Therefore, overlays now remain open when exiting the edit mode. (APPDEV-16105)

AppHeader​

  • Prevent an infinite layout distribution loop in the browser when providing solely custom actions. (APPDEV-15919)

CodeEditor​

  • Now allows the insertion of non-breaking space (U+00A0) characters. (APPDEV-16007)

DataTable​

  • Toggling line wrap on a parent column now applies to all nested child columns. (APPDEV-14059)
  • Memory consumption is now reduced when rendering large datasets. (APPDEV-15711)
  • Cell actions can now be defined for multiple target columns. (APPDEV-12489)
  • Sparkline columns now support two new config options: Use curve to control the shape of the sparkline (smooth or straight lines), and use gapPolicy to decide how missing data is handled (leave a gap or interpolate). (APPDEV-15533)
  • Columns no longer disappear during horizontal scrolling when both an extended width config ({ type: 'auto' | 'content'; maxWidth?: number }) and an explicit column size (via defaultColumnSizing, columnSizing, or by resizing the column) are set for a column. (APPDEV-16121)
  • Sparkline columns now display their context values (that is, labels showing the maximum and/or minimum values) on the right side and have reduced vertical padding. (APPDEV-15533)
  • The vertical divider indicating the resize handle is now rendered for the last column as well. (APPDEV-15980)
  • Column widths are now correctly remeasured on rerender. (APPDEV-15908)
  • Column settings overlay now responds faster and has improved column ordering performance, especially in tables with many columns. (APPDEV-14474)
  • The table now displays shadows on its left and right edges to indicate horizontal overflow. Previously, these shadows appeared only when pinned columns were present. (APPDEV-10806)
  • The sorting indicator and header action buttons now display correctly for both default and custom headers. (APPDEV-16014)

DQLEditor​

  • Now allows the insertion of non-breaking space (U+00A0) characters. (APPDEV-16007)

FilterField​

  • Applying contains, starts-with or ends-with value suggestion does not escape the value again. (APPDEV-16008)
  • FilterField suggestion highlighting does not crash with a callstack size exceeded error. (APPDEV-15910)
  • Additional safeguards are now included to prevent "Selection points outside of document" errors. (APPDEV-15917)
  • Suggestions now update correctly when validatorMap changes with an open overlay. (APPDEV-14941)
  • Suggestions no longer flicker when filtering.
  • Assistive technologies for visually impaired users now read out a summary of the suggestions once opened. (APPDEV-14912)
  • Show more button is now hidden if there is only one additional item compared to the default suggestions count. (APPDEV-15989)

HistogramChart​

  • Deprecating ChartInteractions in favor of charts slots. (APPDEV-15611)
  • Some bugs when importing configuration related to toolbar in the HistogramChart were solved. (APPDEV-16015)

HoneycombChart​

  • Fixed a color mismatch between tiles and legend color in the HoneycombChart when setting min and max with the same value. (APPDEV-15847)

PieChart​

  • Now the PieChart groups the slices thinner than the gap between them into an invisible one. (APPDEV-15129)

SegmentSelector​

  • Added a default max-width of 400px to avoid long triggers. The max-width can be customised via CSS. (APPDEV-15321)

Select​

  • Log level for Failed to stringify value changed to info. (APPDEV-15998)

TimeseriesChart​

  • Deprecating ChartInteractions in favor of charts slots. (APPDEV-15611)
  • Now the TimeseriesChart supports Zoom as a slot and is enabled by default. (APPDEV-13199) (APPDEV-13199)
  • Now the TimeseriesChart supports Pan as a slot and is enabled by default. (APPDEV-13263) (APPDEV-13263)
  • Now the TimeseriesChart supports DownloadCSV as a slot. (APPDEV-13266) (APPDEV-13266)
  • Now the TimeseriesChart supports Toolbar as a slot. (APPDEV-15104) (APPDEV-15104)

2.14.1​

Updates​

DataTable​

  • Columns no longer disappear during horizontal scrolling when both an extended width config ({ type: 'auto' | 'content'; maxWidth?: number }) and an explicit column size (via defaultColumnSizing, columnSizing, or by resizing the column) are set for a column. (APPDEV-16121)
  • Column widths are now correctly remeasured on rerender. (APPDEV-15908)

2.14.0​

Dependency updates​

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

Deprecations​

DataTable​

  • The TableActionsMenu.ItemIcon slot will be removed in the future. Use the TableActionsMenu.Prefix slot instead. (APPDEV-15600)

SearchInput​

  • BaseInputProps will be marked as internal in a future release. Please use the individual public props instead. (APPDEV-15376)

Updates​

Charts​

  • GaugeChart hides now the labels for small containers. (APPDEV-15857)

DataTable​

  • Now renders box-shadow for pinned columns correctly when resizing the table. (APPDEV-15756)
  • Meterbar columns now support a showIndicator prop to display indicators at defined value thresholds. (APPDEV-10800)
  • Column filtering is now available in the column settings modal when only pinning settings are enabled. (APPDEV-15680)
  • Annotations headers in gantt columns now always show vertical dividers, independent of the table's verticalDividers config. (APPDEV-15286)
  • Column settings modal now keeps the Show/hide all checkbox and search input visible when scrolling through the columns list. (APPDEV-15526)
  • Row ordering no longer triggers a re-render when drag and drop is disabled for certain rows. (APPDEV-15765)
  • DataTableMeterbarColumnConfig now supports a formatter prop that allows formatting the value displayed in the tooltip. (APPDEV-5640)
  • Drag and drop overlays as well as context menu for cell and column actions are now positioned correctly in tables where CSS transforms have been applied to an ancestor. (APPDEV-15583)
  • The 'Expand/Collapse All Sub-Rows' button now has updated positioning when the sub-row indicator column is right-aligned. (APPDEV-15633)
  • Now correctly displays the page index info on small screens when there is only one page. (APPDEV-15780)
  • Sub-row indicator column is now remeasured when collapsing sub-rows. (APPDEV-15646)
  • The TableActionsMenu now supports two new slots: TableActionsMenu.Prefix and TableActionsMenu.Suffix, enabling flexible icon placement on both sides of a menu item. (APPDEV-15600)

DateTimePicker​

  • Fixed caret visibility and keyboard navigation in calendar on Safari. (APPDEV-15889)

DateTimeRangePicker​

  • Fixed caret visibility and keyboard navigation in calendar on Safari. (APPDEV-15889)

FilterField​

  • Type IPAddress can be enabled in the parserConfig and used in the validatorMap. (APPDEV-13182)
  • Empty SuggestionGroups are now hidden, including those containing only labels. (APPDEV-15580)
  • Built-in suggestion groups now display dividers between them. (APPDEV-15525)

HistogramChart​

  • Now the HistogramChart supports DownloadCSV as a Subcomponent. (APPDEV-13268)
  • Now the HistogramChart supports Zoom as a Subcomponent and is enabled by default. (APPDEV-13262)
  • Now the HistogramChart supports Pan as a Subcomponent and is enabled by default. (APPDEV-13264)
  • Now the HistogramChart supports Toolbar as a Subcomponent. (APPDEV-15103)

HoneycombChart​

  • The width prop now accepts CSS unit strings like "100%" or "500px" in addition to numeric pixel values. className and style props are now available through StylingProps extension. (APPDEV-15307)

Page​

  • Allow forcing DetailView drawer content to full available height. (APPDEV-16013)

SearchInput​

  • Introduce a new SearchInput component to standardize search bars across applications. The SearchInput uses an input field with type="search" and provides a built-in clear button that automatically clears the input when clicked.

SegmentSelector​

  • Now provides a specific error message when the selected variable comes from a column containing arrays instead of scalar values. (APPDEV-15209)
  • A descriptive text is now displayed for SegmentSelector variables with an empty string value. (APPDEV-15652)

Select​

  • Added a pointer-events style to the root Select component, eliminating the need for CustomTrigger style override to display the correct disabled cursor. (APPDEV-14985)

SingleValue​

  • Now supports width and height props to control component dimensions. Both props accept CSS unit strings (e.g., "100%", "200px") or numeric pixel values (e.g., 300), allowing flexible sizing options while maintaining automatic font scaling.

Sparkline​

  • Added width and height props for flexible sizing control.

The Sparkline component now accepts width and height props that support both string values (e.g., "100%", "200px") and numeric values (automatically converted to pixels). This makes it easier to control Sparkline dimensions when used in constrained layouts or alongside other components like SingleValue.

  • Now does not cut labels on extreme values. Closes (APPDEV-15851)

TimeframeSelector​

  • Fixed caret visibility and keyboard navigation in calendar on Safari. (APPDEV-15889)

Toast​

  • ToastContainer now accepts an aria-label to allow customization of the accessible name. (APPDEV-15537)

XYChart​

  • ColorRules now apply colors to individual tiles in RectSeries (heatmaps). (APPDEV-15640)
  • Prevented an error when Rect Series have all datapoints with nullish values. (APPDEV-15893)
  • BarSeries is now available as a new shape in the strato package. (APPDEV-14792)
  • Resolved issue preventing proper handling of the error state (APPDEV-15698)
  • Rect and Bar series now allow partial selection. A shape doesn't have to be fully covered by a selection to be detected. (APPDEV-15573)

2.13.2​

Deprecations​

FilterField​

  • The currentToken prop in the onSuggest callback is now deprecated. Please use currentTokens instead. (APPDEV-15544)

Updates​

FilterField​

  • Provide currentTokens in the onSuggest callback for easy filtering of different types of custom suggestions, depending on the current token. (APPDEV-15544)

2.13.1​

Updates​

Page​

  • Use stricter selector for :has() to improve performance on high node-count subtrees. (APPDEV-15811)

2.13.0​

Dependency updates​

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

Deprecations​

FilterField​

  • The operator prop in FilterFieldStatementNode and FilterFieldValidatorMap will be removed and replaced with comparisonOperator. (APPDEV-12828)

Updates​

Charts​

  • Refactored tooltip text ellipsis logic for improved performance. (APPDEV-15418)
  • Refactored legend text ellipsis logic for improved performance. (APPDEV-15418)
  • Hovering the color icon in chart's legend now highlights the corresponding series in the chart. (APPDEV-15535)
  • Treemap now displays dataset with no clusters defined. (APPDEV-15753)

AnnotationsChart​

  • Now allows setting chart width using the width prop. Accepts CSS units like "100%" or "500px", or numeric values, which get treated as pixels.
  • Fixed annotation marker hover colors in Firefox by replacing canvas brightness filter with direct RGB color manipulation. (APPDEV-15605)

CategoricalBarChart​

  • ColorRule with nested valueAccessor now targets specific subcategories in multi-dimensional data. (APPDEV-15575)
  • ColorRule valueAccessor can now access any custom field in the data, including nested properties using dot notation (e.g., status, metadata.severity). (APPDEV-15782)
  • Added Toolbar and DownloadCSV slots to CategoricalBarChart for toolbar configuration. (APPDEV-15102, APPDEV-13269)

Chip​

  • Now has improved active and hover state styles for polymorphed Chips when rendered as button, a, or elements with tabindex set. (APPDEV-15489)

CodeSnippet​

  • Minimum height for condensed size is now reduced. (APPDEV-15379)
  • Line numbers are now top-aligned. (APPDEV-15379)

DataTable​

  • Columns can now be ordered via drag-and-drop in the column settings modal. (APPDEV-9900)
  • Downloading data as CSV now excludes sparkline columns. (APPDEV-5791)
  • When downloading data as CSV, cells containing MultiMeterBarChart values are now in JSON format. (APPDEV-5791)
  • Columns with auto or content width do not keep growing anymore under specific browser zoom and display scale combinations. (APPDEV-15617)
  • Now allows custom column actions in addition to certain built-in column actions for meterbar columns. The allowed built-in actions include CopyItem, HideColumn, ColumnOrder, and ColumnPinning. (APPDEV-15691)

FilterField​

  • Suggestions for keys of type JSONPath use the JsonIcon instead of the VariableIcon.
  • Updated syntax tree version to 005 with the addition of comparisonOperator. (APPDEV-12828)
  • Search suggestions now correctly preserve and display trailing spaces and already escaped values are no longer escaped again when applying the search suggestion. (APPDEV-15060, APPDEV-15371)
  • Out of range highlight index has been fixed for suggestions matches. (APPDEV-15701)
  • Large numbers with decimals are now parsed as strings instead of a BigInt, which can't handle decimals.
  • Suggestions from the onSuggest callback now include a suggestionType property, allowing custom handling based on whether a suggestion comes from a validator, JSONPath, or hint. (APPDEV-15479)
  • convertFilterFieldTreeToString now correctly parses search operator.
  • Clearing the FilterField after pasting into a FilterField that already has an incomplete statement does not crash the FilterField. (APPDEV-15541)
  • Inserting the "Use as key" suggestion does not escape already escaped keys that include double-quotes. (APPDEV-15689)
  • convertFilterFieldTreeToString now correctly parses asterisks for starts-with, ends-with, and contains. (APPDEV-15578)
  • Safari now correctly underlines matching suggestions in the suggestions overlay. (APPDEV-15585)

GaugeChart​

  • Add support for object values with valueAccessor and ColorRule evaluation. (APPDEV-15518)

HistogramChart​

  • When highlighting a series, all dimmed series are more opaque. (APPDEV-15535)

MeterBarChart​

  • Add support for object values with valueAccessor and ColorRule evaluation. (APPDEV-15518)

MultiMeterBarChart​

  • Add support for object values with valueAccessor and ColorRule evaluation. (APPDEV-15518)

Sparkline​

  • contextValues can be aligned to the right or left, labels can have fixed width, negative sign has reserved spacing, labels fontSize are dynamic depending on container height. ( APPDEV-13369)

TimeframeSelector​

  • Presets are now fully isolated, ensuring a clean and reliable experience across all instances. (APPDEV-15686)
  • Always applies valid timeframes on Enter. (APPDEV-15559)

TimeseriesChart​

  • When highlighting a series, all dimmed series are more opaque. (APPDEV-15535)
  • Fixed custom intents icon not appearing on collapsed Toolbar (APPDEV-15550)

ToggleButtonGroup​

  • Scroll is confined to the ToggleButtonGroup when an item is selected or on page load. (APPDEV-15688)
  • Ensure no non-readable (like false, null, or undefined) children are passed by the useSlots hook. (APPDEV-15581)

TreeMap​

  • Now the TreeMap supports ColorRules (APPDEV-15459)

XYChart​

  • Resolved an issue where highlighting a series would also highlight other series with partially matching IDs.
  • Fixed closest-point selection when the axis is reversed (APPDEV-15632).
  • Fixed data-min and data-max incorrectly showing domain boundaries for time axes. (APPDEV-15619)
  • Added Custom Tooltip for XYChart. (APPDEV-15174)
  • RectSeries now support color for its colorRule slot. (APPDEV-15546)

2.12.3​

Updates​

Page​

  • Use stricter selector for :has() to improve performance on high node-count subtrees. (APPDEV-15811)

2.12.2​

Updates​

FilterField​

  • Large numbers with decimals are now parsed as strings instead of a BigInt, which can't handle decimals.
  • convertFilterFieldTreeToString now correctly parses search operator.
  • convertFilterFieldTreeToString now correctly parses asterisks for starts-with, ends-with, and contains. (APPDEV-15578)

ToggleButtonGroup​

  • Scroll is confined to the ToggleButtonGroup when an item is selected or on page load. (APPDEV-15688)

2.12.1​

Deprecations​

FilterField​

  • The currentToken prop in the onSuggest callback is now deprecated. (APPDEV-15544)

Updates​

FilterField​

  • Provide currentTokens in the onSuggest callback for easy filtering of different types of custom suggestions, depending on the current token. (APPDEV-15544)
  • Clearing the FilterField after pasting into a FilterField that already has an incomplete statement does not crash the FilterField. (APPDEV-15541)

2.12.0​

Deprecations​

  • The Menu.ItemIcon slot will be removed in the future. Use Menu.Prefix or Menu.Suffix instead. (APPDEV-10187)

Updates​

AnnotationsChart​

  • Fixed actions menu, now hides while scrolling and reappears when scrolling stops. (APPDEV-15493)

ChipGroup​

  • Introduces a maxVisibleChips property to limit the number of visible chips in a collapsed chip group, regardless of available space. (APPDEV-15046)

DataTable​

  • The cell actions menu trigger now has a higher z-index and is no longer obscured in meterbar columns. (APPDEV-15523)
  • Pagination controls now hide the page selector when there's only one page to show, or when the table has no data. (APPDEV-12899)
  • Purely presentational columns no longer have an aria-label. (APPDEV-15494)
  • Hovering a single Gantt segment no longer re-renders all Gantt segments in the table. (APPDEV-14939)
  • No longer shows a blank space in Firefox when the table data is updated. (APPDEV-15467)

FilterField​

  • Pin and clear buttons in the input are now properly aligned with the designs. (APPDEV-14995)
  • Negative numbers are now correctly converted to Number nodes (instead of String) in the filter field syntax tree. (APPDEV-15406)
  • Added detail descriptions for all operators. (APPDEV-15054)

MapView​

  • Fixed a bug making the MapView unable to show DownloadCSV in a collapsed Toolbar (APPDEV-15424)
  • Introduces two new slots, Menu.Prefix and Menu.Suffix, for adding icons to menu items. (APPDEV-10187)

Page​

  • Rebuilt Page component, removed animations for performance reasons and added opt-in integrated controls. (APPDEV-14149)

TreeMap​

  • The TreeMap now accepts Toolbar and DownloadCSV as Slots. (APPDEV-15110)

XYChart​

  • Zoom-in restrictions for numerical and logarithmic axes have been removed. However, once any axis (except categorical axes) reaches its maximum limit, further zoom-in will no longer be possible.(APPDEV-12703)
  • Improved styling for hovered datapoints in a RectSeries. (APPDEV-15390)

2.11.4​

Updates​

ToggleButtonGroup​

  • Scroll is confined to the ToggleButtonGroup when an item is selected or on page load. (APPDEV-15688)

2.11.3​

Updates​

FilterField​

  • Large numbers with decimals are now parsed as strings instead of a BigInt, which can't handle decimals.
  • convertFilterFieldTreeToString now correctly parses search operator.
  • Clearing the FilterField after pasting into a FilterField that already has an incomplete statement does not crash the FilterField. (APPDEV-15541)
  • convertFilterFieldTreeToString now correctly parses asterisks for starts-with, ends-with, and contains. (APPDEV-15578)

2.11.2​

Updates​

XYChart​

  • Fixed error when categorical axis had only one category. (APPDEV-15599)

2.11.1​

Updates​

FilterField​

  • Fix issue where operator suggestions were shown when pasting content. (APPDEV-14905)
  • Fix infinite loop when entering quotes and brackets. (APPDEV-15520)

SegmentSelector​

  • No longer throws an error within the Overlay. (APPDEV-15365)

2.11.0​

Dependency updates​

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

Updates​

Charts​

  • Apply strategy pattern for InteractionsOverlay (APPDEV-13111)

DataTable​

  • Now properly adjusts its height when the data is cleared. (APPDEV-15391)
  • Column widths are now preserved when the table is not displayed, but still mounted. (APPDEV-15389)
  • Now has improved vertical scroll performance, especially in scenarios with many hidden columns. (APPDEV-15320)
  • Empty table states now have updated messages and styling. (APPDEV-13554)
  • The first row details element no longer displays a top horizontal divider and the last row details element no longer displays a bottom horizontal divider. In non-contained tables, the last row no longer displays a horizontal divider, and tables with hidden headers no longer display a top horizontal divider. (APPDEV-15161)

DateTimePicker​

  • Clicking inside spin buttons now selects all digits, keeping input editable. (APPDEV-15381)

DonutChart​

  • DonutChart handles Toolbarand DownloadCSVas Slot. ( APPDEV-15100) - (APPDEV-13466)
  • Fixing error when loading state is on. (APPDEV-15431)

DQLEditor​

  • Now has improved auto-completion performance. (APPDEV-15356)

FilterField​

  • Improved handling of spaces and closing parentheses for filtering pinned and recent suggestions. (APPDEV-14849)
  • A controlled FilterField does not crash when pasting an image while some FilterField content is selected. (APPDEV-15398, APPDEV-15404)
  • The disabled and required no longer default to false in the FilterField to enable proper inheritance when wrapped in a FormField. (APPDEV-15388)
  • Validator map type definition now accepts an array of types for conveniently restricting a value type to a subset of filter field primitive types. (APPDEV-15166)
  • ShowMore is no longer shown when the amount of options is exactly the limit.
  • Fixed spacing in "Use as key/value" suggestion. (APPDEV-15393)
  • The tree to string conversion util now keeps all backslashes as in the original input. (APPDEV-15425)
  • Use as key / value is also shown when pasting and includes values or keys that are already in the FilterField. "Match formatting“ has been renamed to “Apply filter syntax“ and is only shown when the pasted content contains special characters. (APPDEV-14705)

PieChart​

  • Fixing error when loading state is on. (APPDEV-15431)
  • Now PieChart handles Toolbar and DownloadCSV as Slot. ( APPDEV-15100) - (APPDEV-13466)

SegmentSelector​

  • To always apply segments regardless of their validity the setSegments function now accepts an additional force param. (APPDEV-15312)
  • Validates asynchronously to ensure private and new segments are validated correctly. (APPDEV-15365, APPDEV-15310)
  • Tooltip overlay is now scrollable and shows all selected segments. (APPDEV-14948)
  • setSegments no longer throws an error when permissions are missing. (APPDEV-15365)

Select​

  • onFocus and onBlur events are not called when overlay opens or closes. (APPDEV-15423)

SimpleTable​

  • The last row in non-contained tables no longer displays a horizontal divider. (APPDEV-15161)

SingleValueGrid​

  • Setting a proper role and aria-label value (APPDEV-15419)

TimeframeSelector​

  • Clicking inside spin buttons now selects all digits, keeping input editable. (APPDEV-15381)
  • aria-disabled property is now only added when explicitly set. (APPDEV-15457)

TimeseriesChart​

  • Fixed tooltip to be displayed in small charts. (APPDEV-15351)

XYChart​

  • Panning and dragging are now only displayed on pannable axes. (APPDEV-13112)
  • The default color palette for ‘DotSeries’ and ‘LineSeries’ has been set to ‘categorical’. (APPDEV-14794)

2.10.2​

Updates​

SegmentSelector​

  • setSegments no longer throws an error when permissions are missing. (APPDEV-15365)

2.10.1​

Updates​

DonutChart​

  • Fixing error when loading state is on. (APPDEV-15431)

PieChart​

  • Fixing error when loading state is on. (APPDEV-15431)

2.10.0​

Dependency updates​

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

Deprecations​

XYChart​

  • The DotSeries name prop has been deprecated, please switch to nameAccessor instead.

  • The ColorSelectionProp prop has been deprecated, please switch to ShapeColorSelectionProp instead. (APPDEV-14339)

Updates​

Charts​

  • Fixed an issue where the toolbar, with a placement of bottom-right, would not stay correctly positioned after being dragged.
  • Fixed chart intents implementation. (APPDEV-15123)
  • Fixed an issue in the ColorRules where the color wasn't applied if using a string including the default accessor name in the valueAccessor (APPDEV-15326)
  • Prevent future to value in timeframe being displayed as now on tooltip. (APPDEV-15220)

AiResponse​

  • Introduces a new component to animate AI-generated content as Markdown. (APPDEV-14959)

CategoricalBarChart​

  • Resolved an issue where ticks were misaligned when zooming in the browser or setting the tick label layout to vertical in Safari. (APPDEV-15137)

CodeSnippet​

  • The right padding is now reduced. (APPDEV-15043)

DataTable​

  • Columns with disableColumnHiding set now remain hidden when toggling the visibility of a parent column or "Show all" in the column settings. (APPDEV-15275)
  • Sub-row indicator column headers now show their full header label without ellipsis or tooltip when there is sufficient space. (APPDEV-14263)
  • The 'Expand/Collapse All Sub-Rows’ button is now correctly aligned in the sub-row indicator column when a custom header renderer is used. (APPDEV-15308)
  • Now column ordering works correctly in the column settings modal when adjacent columns are pinned. (APPDEV-14955)
  • Pinned columns now correctly render a box-shadow on overflow after reordering rows via drag and drop. (APPDEV-15134)
  • Row batch selection with Shift+Click now respects the current row order. (APPDEV-15197)
  • For custom headers not using the DataTable.DefaultCell with low height and sorting activated, the height of the cell no longer increases on hover. (APPDEV-14837)
  • Annotations headers in gantt columns now support loading, error, and empty states. (APPDEV-14957)
  • Now adapts row height correctly when enabling lineWrap in Safari. (APPDEV-15171)
  • Now exposes the DATA_TABLE_ROW_ID_SEPARATOR constant for custom row ID handling in combination with sub-rows. (APPDEV-15216)
  • Console error 'Cannot read properties of undefined' which was logged sometimes during drag and drop is now fixed. (APPDEV-15223)

DonutChart​

  • Improving the tooltip so that it follows the pinned marker on scroll. (APPDEV-14892)

FilterField​

  • Clean up spaces when deleting statements with the delete statement button. (APPDEV-15064)
  • Move focus to the first newly shown option when expanding collapsed suggestions. This improves keyboard navigation and focus consistency. (APPDEV-15155)
  • LogicalOperators (OR, AND) after an opening bracket or another LogicalOperators now cause an error. (APPDEV-15061, APPDEV-15221)
  • Keys with spaces in the validatorMap now correctly display suggested operators. (APPDEV-15195)
  • Now handles disabled, required and id updates correctly. (APPDEV-15293)
  • The FilterField syntax tree now correctly groups statements chained using implicit and explicit logical AND and logical OR. (APPDEV-14932)

HoneycombChart​

  • Now the HoneycombChartis able to configure the toolbar through a Slot HoneycombChart.Toolbar (APPDEV-15130)
  • Now HoneycombChart is able to configure the DownloadCSV Button through a slot HoneycombChart.DownloadCSV. (APPDEV-13464)
  • Improving the tooltip so that it follows the pinned marker on scroll. (APPDEV-14892)

MeterBarChart​

  • Improving the tooltip so that it follows the pinned marker on scroll. (APPDEV-14892)
  • Fixed some styling issues in the Toolbar of the MeterBarChart. (APPDEV-15222)

MultiMeterBarChart​

  • Improving the tooltip so that it follows the pinned marker on scroll. (APPDEV-14892)

PieChart​

  • Improving the tooltip so that it follows the pinned marker on scroll. (APPDEV-14892)

Select​

  • Also fires a blur event when the focus moves outside of content area. (APPDEV-15236)

SingleValue​

  • SingleValue now is able to use Intents and Toolbar. (APPDEV-13909)
  • Improve normalize function type safety to avoid exceptions. (APPDEV-15338)

SingleValueGrid​

  • Intents can now be added to the grid using the SingleValueGrid.Intent or individually using the seriesAction prop. (APPDEV-14694)
  • Added SingleValueGrid.Toolbar component to customize or hide the toolbar. (APPDEV-14697)
  • Enabling Color overriding for custom fields within the dataset. (APPDEV-15274)

Tabs​

  • Scroll button no longer appears above other overlays. (APPDEV-15375)

TimeseriesChart​

  • Range thresholds now appear behind the chart shapes. (APPDEV-15015)

ToggleButtonGroup​

  • Scroll button no longer appears above other overlays. (APPDEV-15375)

TreeMap​

  • Improving the tooltip so that it follows the pinned marker on scroll. (APPDEV-14892)

XYChart​

  • An additional column has been added into the downloadable CSV with the type of each datapoint. (APPDEV-15188)
  • Rect series now have a default name in the downloaded CSV file. (APPDEV-15188)
  • Improved hover for dot series using per-series quad tree closest-point lookup for large datasets. (APPDEV-14931)
  • Resolved an issue where ticks were misaligned when zooming in the browser or setting the tick label layout to vertical in Safari. (APPDEV-15137)
  • The DotSeries slot now supports multiple series using the new 'seriesIdAccessor' prop. (APPDEV-14339)
  • LineSeries variant is now available in the strato package. (APPDEV-14395)

2.9.5​

Updates​

SegmentSelector​

  • setSegments no longer throws an error when permissions are missing. (APPDEV-15365)

2.9.4​

Updates​

FilterField​

  • Clean up spaces when deleting statements with the delete statement button. (APPDEV-15064)

2.9.3​

Updates​

Page​

  • Revert the rework due to erroneously introduced breaking changes. (APPDEV-15285)

2.9.2​

Updates​

DataTable​

  • Columns are now remeasured when fonts are finished loading. (APPDEV-15124)
  • Newly visible columns now render correctly during horizontal scrolling. (APPDEV-15121)

2.9.1​

Updates​

FilterField​

  • The value of JSONPath keys contains escape characters to correctly convert JSONPath nodes in the convertTreeToString function. (APPDEV-15208)
  • Using replace-statement as insertionStrategy for suggestions now replaces the pasted content token. (APPDEV-15242)
  • A standalone $ after a comparison operator is no longer the start of a new statement and is now parsed as a value. (APPDEV-15082)
  • More characters are allowed in filter keys again to match the validity of statements before updating the syntax for parsing free text. (APPDEV-15240)

Page​

  • Merge back dropped commits relevant to the Page's backwards-compatibility and pass through data-testid and id down to the Page component. (APPDEV-15121)

2.9.0​

Updates​

Charts​

  • Fixed an issue where the thresholds tooltip would cut off some items when too many thresholds overlapped.

AiLoadingIndicator​

  • Introduces a new component to indicate that AI-generated content is being loaded. (APPDEV-14958)

AnnotationsChart​

  • Improving the tooltip so this one can follow the pinned marker on scroll. (APPDEV-14782)
  • Enable truncateMode regardless of textOverflow prop.

CategoricalBarChart​

  • Fixed an issue that caused the label containing emojis to be cropped in categorical axis. (APPDEV-15048)
  • Solved an issue that caused truncated axis ticks to not have text ellipsis. (APPDEV-15135)
  • Improving the tooltip so this one can follow the pinned bar on scroll. (APPDEV-14782)

DataTable​

  • Table's height is now updated correctly when the number of visible header groups changes. (APPDEV-15044)
  • The column definition now provides an additional label property for custom headers that appears in the column settings and as user-friendly aria-label. (APPDEV-14531)
  • When row interactivity is enabled, text selection within table rows and row details is now possible. (APPDEV-15053)

FeatureHighlight​

  • Overlay now repositions when the anchor element moves after initial render. (APPDEV-15021)

FilterField​

  • JsonPath now supports quoted root nodes. (APPDEV-14741)

GaugeChart​

  • Intents can now be added using the GaugeChart.Intent component. (APPDEV-13911)
  • The chart now displays a toolbar when using intents. This toolbar can be customized or hidden using the GaugeChart.Toolbar component. (APPDEV-13888)

HistogramChart​

  • Improving the tooltip so this one can follow the pinned bin on scroll. (APPDEV-14782)
  • Menu.Intent now supports adding a custom icon. (APPDEV-14885)
  • Height is now limited to no longer overlap with the browser's address bar on mobile devices. (APPDEV-15126)

Page​

  • The Sidebar now features a new expander button available via opt-in using the integratedControls prop. Animations for both the Sidebar and DetailView have been removed which enhances the performance of the Page component. (APPDEV-14149)

TimeseriesChart​

  • Fixing series actions scrolling for x-axis selection tooltip. (APPDEV-15206)
  • Improving the tooltip so this one can follow the pinned datapoint on scroll. (APPDEV-14782)

XYChart​

  • Fixed an issue that caused the label containing emojis to be cropped in categorical axis. (APPDEV-15048)
  • DotSeries now uses the name of the series as name field in downloaded CSV file. (APPDEV-14949)
  • Improving the tooltip so this one can follow the pinned datapoint on scroll. (APPDEV-14782)

2.8.4​

Updates​

SegmentSelector​

  • setSegments no longer throws an error when permissions are missing. (APPDEV-15365)

2.8.3​

Updates​

FilterField​

  • Clean up spaces when deleting statements with the delete statement button. (APPDEV-15064)

2.8.2​

Updates​

DataTable​

  • Table's height is now updated correctly when the number of visible header groups changes. (APPDEV-15044)
  • Columns are now remeasured when fonts are finished loading. (APPDEV-15124)
  • Newly visible columns now render correctly during horizontal scrolling. (APPDEV-15121)
  • No longer crashes when column actions are used together with custom row IDs. (APPDEV-15263)

2.8.1​

Updates​

FilterField​

  • Search operator is correctly converted in the convertFilterFieldTreeToString function. (APPDEV-15128)

2.8.0​

Breaking changes​

FilterField​

  • The returned value of the matches-phrase and not-matches-phrase operators changed from ~ to matches-phrase, and from !~ to not-matches-phrase, which is considered breaking but included in a patch as the API and documentation already specify the expected value as matches-phrase and not-matches-phrase. (APPDEV-14997)

Deprecations​

convertToColumnsV2​

  • The convertToColumnsV2 function is now deprecated. Please use convertToColumns instead. (APPDEV-13695)

DataTableV2​

  • The DataTableV2 and all it's types and subcomponents that include DataTableV2 in their name are now deprecated. Please use DataTable instead. (APPDEV-13695)

SimpleTableV2​

  • The SimpleTableV2 and all it's types that include SimpleTableV2 in their name are now deprecated. Please use SimpleTable instead. (APPDEV-13695)

Updates​

Charts​

  • Updated chart toolbar layout. (APPDEV-13912)

DataTableV2​

  • The cursor now stays as col-resize while resizing columns.
  • Now has improved caching for deeply nested sub-rows. (APPDEV-14937)
  • Parent headers of nested header groups are now rendered correctly when toggling column visibility. (APPDEV-14944)
  • Pinned columns now show improved performance during resizing. (APPDEV-14811)
  • Cell action triggers no longer overlap with sub-row expanders in right-aligned columns. (APPDEV-14961)

FilterField​

  • No longer shows a scrollbar when typing a or o in an empty FilterField. (APPDEV-14962)
  • A suggestion for searching for text is now shown in the FilterField when applicable. The suggestion is only added when searchConversion is enabled in the parserConfig. (APPDEV-14350)
  • The convertStringToFilterFieldTree function converts the given string according to the provided validatorMap. (APPDEV-14980)
  • The FilterField now supports showing multiple relevant suggestion types simultaneously. E.g. key suggestions and comparator suggestions when inserting "key ". (APPDEV-14350)
  • The number of default suggestions rendered is now limited by default. A "Show more" button is shown if more suggestions are available. The amount of suggestions can be adjusted using the defaultSuggestionsCount prop. (APPDEV-14841)
  • If a key has JSONPath as one of its types in the validatorMap, a JSONPath suggestion is shown even when there are additional type definitions for the same key. (APPDEV-15018)
  • The FilterField syntax now supports entering text with reserved characters without splitting the text into multiple tokens. (APPDEV-13980)

HistogramChart​

  • You can now use async templates in Select actions. (APPDEV-14621)
  • Header text in Select tooltip is now left aligned. (APPDEV-15025)

MeterBarChart​

  • MeterBarChart now is able to use a Toolbar. (APPDEV-13881)
  • MeterBarChart is now able to add Intents. (APPDEV-14695)

MultiMeterBarChart​

  • The MultiMeterBarChart now is able to show a Toolbar. (APPDEV-13924)
  • The MultiMeterBarChart now is able to use Intents. (APPDEV-14696)

TimeseriesChart​

  • Header text in Select tooltip is now left aligned. (APPDEV-15025)
  • You can now use async templates in Select actions. (APPDEV-14621)

XYChart​

  • Header text in Select tooltip is now left aligned. (APPDEV-15025)
  • You can now use async templates in Select actions. (APPDEV-14621)

2.7.6​

Updates​

SegmentSelector​

  • setSegments no longer throws an error when permissions are missing. (APPDEV-15365)

2.7.5​

Updates​

FilterField​

  • Fixes erratic scrolling behavior for virtualized suggestion lists. (APPDEV-15353)

2.7.4​

Updates​

DataTableV2​

  • Table's height is now updated correctly when the number of visible header groups changes. (APPDEV-15044)
  • Columns are now remeasured when fonts are finished loading. (APPDEV-15124)
  • Newly visible columns now render correctly during horizontal scrolling. (APPDEV-15121)

2.7.3​

Updates​

FilterField​

  • The convertStringToFilterFieldTree function converts the given string according to the provided validatorMap. (APPDEV-14980)

2.7.2​

Updates​

FilterField​

  • Search operator is correctly converted in the convertFilterFieldTreeToString function. (APPDEV-15128)

2.7.1​

Updates​

DataTableV2​

  • Reverted "While resizing a column the cursor now remains as col-resize rather than switching back to pointer" due to performance impact on large pages. (APPDEV-15023)

FilterField​

  • No longer returns No matching suggestions found. message in the onSuggest callback when not applicable. (APPDEV-14981)

2.7.0​

Breaking changes​

FilterField​

  • The FilterField.Suggestion ref type changed from HTMLLiElement to HTMLDivElement, which is considered breaking, but included in a patch to fix the suggestions markup and a11y issues. (APPDEV-14743)

Dependency updates​

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

Updates​

Charts​

  • Simplified formatter for string units. (APPDEV-11106)

AnnotationsChart​

  • Fixed textOverflow truncateMode textWidth calculation. (APPDEV-14889)

DataTableV2​

  • The table now provides the option to configure annotations for gantt columns via the annotationsHeader prop. (APPDEV-14503)
  • Now supports microsecond and nanosecond precision when sorting columns of type date. (APPDEV-13625)
  • Now has improved scrolling performance for deeply nested sub-rows. (APPDEV-14717)

FilterField​

  • Details and actions for recent and pinned suggestion items are now placed differently depending on the overlay width to make proper use of the space available. (APPDEV-14743)
  • Auto suggestions in the onSuggest callback don't include default logical operators anymore. (APPDEV-14743)
  • Type JSONPath can be used for keys in the validatorMap. (APPDEV-14600)
  • JSONPath hint suggestion is shown when typing a JSONPath key. (APPDEV-14600)
  • Input is only focused when actually clicked on and doesn't register outside clicks anymore. (APPDEV-14899)
  • The value placeholder of wildcard suggestions is automatically selected when using a controlled FilterField. (APPDEV-14853)
  • When applying a wildcard suggestion, quotes are automatically added around the value placeholder. (APPDEV-14879)

SegmentSelector​

  • Decrease log level for missing records in SegmentSelector variable values. (APPDEV-14911)
  • Nested arrays in segment variable values are now flattened to enhance compatibility with Grail. (APPDEV-14930)

SelectV2​

  • Now supports a huge amount (100000+) of options within one group. (APPDEV-14963)

SingleValue​

  • Fixed non expected string values in formatter. (APPDEV-14920)

SingleValueGrid​

  • Fixed labels rendering when one of them is null or empty. (APPDEV-14843)
  • Enabling XAxis and YAxis slots for the sparkline config. (APPDEV-14915)

XYChart​

  • Tooltip now shows data for the closest shape (dot, line, or rect). (APPDEV-14506)
  • Removed log for invalid RectSeries values.
  • Replaced internal test IDs with more appropriate attributes. (APPDEV-14379)

2.6.2​

Updates​

DataTableV2​

  • Reverted "While resizing a column the cursor now remains as col-resize rather than switching back to pointer" due to performance impact on large pages. (APPDEV-15023)

2.6.1​

Updates​

DataTableV2​

  • Gantt charts now render again for rows with a single segment parent. (APPDEV-14929)

ToggleButtonGroup​

  • Added aria-hidden to the hidden text content in ToggleButtonGroup.Item. (APPDEV-14950)

2.6.0​

Dependency updates​

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

Deprecations​

Conversion-Utilities​

  • The following are now deprecated, as they have been moved from @dynatrace/strato-components-preview/conversion-utilities to @dynatrace/strato-components-preview/charts:

  • convertToTimeseries

  • convertQueryResultToTimeseries

  • convertToTimeseriesBand

  • convertToFieldEntries

  • getTypesForRecordIndex

  • getFieldsArrayForRecordIndex

  • checkTimeseriesFormat

  • getDimensions

  • TimeseriesWithDimensions

  • FieldEntry

  • Dimension

(APPDEV-11720)

  • convertToColumnsV2 is now deprecated, as it has been moved from @dynatrace/strato-components-preview/conversion-utilities to @dynatrace/strato-components-preview/tables. (APPDEV-11720)

  • The following functions, types and constants have been deprecated and will be removed with the next breaking change cycle:

  • convertToSingleValueData

  • SingleValueData

  • listRecordFields

  • pickRecordIndex

  • EMPTY_SINGLE_VALUE_DATA

  • DQLResultConverter

  • DQLResultConverterProps

  • DQLResultConverterBaseProps

  • DQLResultConverterTimeseriesProps

  • formatDqlNumber

  • ConversionCellValue

  • recommendVisualizations

  • VisualizationRecommenders

  • VisualizationRecommendersProps

  • VisualizationRecommenderResult

  • VisualizationKind

  • VisualizationKindOptions

(APPDEV-11720)

Formatters​

  • The Formatters package, including all of its functions and types, is now deprecated and will be removed in the future. (APPDEV-11727)

Overlays​

  • The components FeatureHighlight, Microguide, TerminologyOverlay, and InformationOverlay are now deprecated in the Overlays package. They have been moved to the Content package. Migration for updating the imports is provided. (APPDEV-11716)

ToggleButtonGroup​

  • The ToggleButtonGroup from the buttons package is now deprecated. Please use the one from the forms package instead. (APPDEV-14311)

Updates​

Charts​

  • The following have been moved from @dynatrace/strato-components-preview/conversion-utilities to @dynatrace/strato-components-preview/charts:

  • convertToTimeseries

  • convertQueryResultToTimeseries

  • convertToTimeseriesBand

  • convertToFieldEntries

  • getTypesForRecordIndex

  • getFieldsArrayForRecordIndex

  • checkTimeseriesFormat

  • getDimensions

  • TimeseriesWithDimensions

  • FieldEntry

  • Dimension

(APPDEV-11720)

Content​

  • The components FeatureHighlight, Microguide, TerminologyOverlay, and InformationOverlay are moved from the Overlays to the Content package. (APPDEV-11716)

Tables​

  • convertToColumnsV2 has been moved from @dynatrace/strato-components-preview/conversion-utilities to @dynatrace/strato-components-preview/tables. (APPDEV-11720)

AnnotationsChart​

  • When end marker value is null it will no longer throw an error. (APPDEV-14763)

DataTableV2​

  • Hidden headers are now supported in combination with column pinning. (APPDEV-14108)
  • Sortable columns now display a sorting icon on hover, even when no column actions are configured. (APPDEV-14777)
  • Columns of type meterbar and gantt now apply runtime checks on the data passed.
  • Pinned columns are now resizable. (APPDEV-14054)
  • While dragging a row, the plus icon used to trigger sub-row expansion is no longer visible in the original row. (APPDEV-14834)
  • While resizing a column the cursor now remains as col-resize rather than switching back to pointer.

DQLEditor​

  • Now highlights the DQL commands load, smartscapeNodes, and traverse. (APPDEV-14806)

FilterField​

  • aria-label prop is now correctly applied to the FilterField content element. (APPDEV-14780)
  • Now calls onChange when a selected section is deleted. (APPDEV-14802)
  • Pasted content now has a special highlighting, and a suggestion to apply the default FilterField highlighting is displayed. (APPDEV-14435)
  • Information about pasted content is included in the onSuggest callback. (APPDEV-14733)
  • Default key suggestions now handle logical operators appropriately.

GaugeChart​

  • Added support for ColorRule slot. (APPDEV-14604)

HistogramChart​

  • No longer hides the toolbar in the HistogramChart when clicking on a pinned tooltip. (APPDEV-12359)

MeterBarChart​

  • The MeterBarChart is able to use ColorRules. (APPDEV-14602)

MultiMeterBarChart​

  • The MultiMeterBarChart now supports ColorRules. (APPDEV-14603)

ToggleButtonGroup​

  • ToggleButtonGroup got reworked with new UI states, validation logic, and was moved to the forms package. (APPDEV-14311)

XYChart​

  • The XYChart is now able to use ColorRules. (APPDEV-14754)
  • Fixed custom actions and intents when only categorical data is used. (APPDEV-14763)
  • When applying a selection on a numerical descending axis, the span of the selection always shows a positive value. (APPDEV-14764)
  • Fixed Highlight not working properly on zoomed rect series. (APPDEV-14775)
  • Updated invalid valueAccessor log to only log once per chart and set the level to info. (APPDEV-14819)

2.5.5​

Updates​

FilterField​

  • aria-label prop is now correctly applied to the FilterField content element. (APPDEV-14780)
  • Now calls onChange when a selected section is deleted. (APPDEV-14802)

2.5.4​

Updates​

XYChart​

  • Fixed chart transition shadow caused in the loading state. (APPDEV-14817)

2.5.3​

Updates​

CategoricalBarChart​

  • Fixed custom colorPalette which wasn't working for multi-dimension data. (APPDEV-14824)

2.5.2​

Updates​

XYChart​

  • Updated invalid valueAccessor log to only log once per chart and set level to warn. (APPDEV-14819)

2.5.1​

Updates​

Markdown​

  • Markdown-style formatting is no longer limited to the first 20,000 characters. This restores the original behavior, but might result in the component crashing when used with overly long content. (APPDEV-14744)
  • Intent opening faulty link. (APPDEV-14749)

XYChart​

  • Fixed data points not being highlighted after a selection. (APPDEV-14708)

2.5.0​

Dependency updates​

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

Deprecations​

GaugeChart​

  • Threshold is now deprecated, in favor of the ThresholdIndicator slot. (APPDEV-14661)

MeterBarChart​

  • Threshold is now deprecated, in favor of the ThresholdIndicator slot. (APPDEV-14661)

Updates​

Charts​

  • Tooltip displays now correct color for icons in dark mode. (APPDEV-14666)
  • Pie and Donut supports now empty state for invalid datasets with zero sum. (APPDEV-14571)

Overlays​

  • FeatureHighlight and Microguide now expose className and style props. (APPDEV-14682)

CategoricalBarChart​

  • The CategoricalBarChart is now able to use ColorRules. (APPDEV-14412)

DataTableV2​

  • Sorting can now be explicitly enabled for meterbar columns by setting disableSorting: false in the column definition. (APPDEV-5654)
  • The column settings trigger now shows the columns icon instead of the table icon. (APPDEV-14487)
  • Narrow pinned columns with user actions no longer expand on hover. (APPDEV-14674)
  • Gantt chart tooltips now pin with every click, no second click needed to pin a new one. When a table row is active, clicking its corresponding Gantt segment no longer deactivates the row. The row remains highlighted and interactive. (APPDEV-13981)
  • Markdown cells no longer crash on undefined or null values. (PAPA-28367)
  • Pinned columns now render a box-shadow on overflow, to visually distinguish them from scrollable content. (APPDEV-14492)
  • Columns can now be pinned and unpinned via column settings. (APPDEV-12729)

DonutChart​

  • Added support to ColorRule slot. (APPDEV-14454)

FilterField​

  • New visuals of the delete statement button. (APPDEV-14553)
  • The overlay now opens and closes with an animation. (APPDEV-14549)
  • Validation now properly handles double backslashes in values. (APPDEV-14622)
  • The filter icon in the FilterField is now permanently visible to improve accessibility. (APPDEV-14645)
  • The overlay suggestion tips now layout responsively according to different screen sizes. (APPDEV-14555)
  • Suggestions now provide better guidance when there are no results for keys. (APPDEV-14439)
  • When calling focus on the FilterField ref the cursor will be placed at the end of the input.
  • Now correctly connects error messages and additional aria-describedby ids. (APPDEV-14578)
  • Added ARIA live region to get suggestion announcement. (APPDEV-14170)

HistogramChart​

  • Fixed zoom selection event firing twice on press Enter. (APPDEV-14517)
  • Update intents layout in toolbar menu. (APPDEV-14641)
  • Fixing magnifiers position of a selected area when scrolling. (APPDEV-14416)

HoneycombChart​

  • The HoneycombChart now supports ColorRule. (APPDEV-14463)

PieChart​

  • Added support to ColorRule slot. (APPDEV-14454)

Radio​

  • Now handles custom error messages correctly and blocks form submission. (APPDEV-14527)

SegmentSelector​

  • Added aria-label to announce applied segments for improved accessibility. (APPDEV-14171)

Select​

  • Fixed invalid DOM property by using autoComplete instead of autocomplete. (APPDEV-14650)

SingleValue​

  • Added support for ColorRule slot. (APPDEV-14597)
  • Adding fallback color for avoiding null issues on runtime. (APPDEV-14718)

SingleValueGrid​

  • Added support for ColorRule slot. (APPDEV-14597)

TimeseriesChart​

  • Fixing magnifiers position of a selected area when scrolling. (APPDEV-14416)
  • Fixed zoom selection event firing twice on press Enter. (APPDEV-14517)
  • Update intents layout in toolbar menu. (APPDEV-14641)
  • Lines painted in chart's edges appear with full expected width. (APPDEV-14573)

XYChart​

  • Fixed an issue where the chart would break when new data was loaded and a selection was made. (APPDEV-14708)
  • Add semi-transparent background for selected points (APPDEV-14484)
  • Fixing magnifiers position of a selected area when scrolling. (APPDEV-14416)
  • Fixed zoom selection event firing twice on press Enter. (APPDEV-14517)

2.4.6​

XYChart​

  • Updated invalid valueAccessor log to only log once per chart and set level to warn. (APPDEV-14819)

2.4.5​

XYChart​

  • Fixed an issue where the chart would break when new data was loaded and a selection was made. (APPDEV-14708)

2.4.4​

Updates​

Markdown​

  • Markdown-style formatting is no longer limited to the first 20,000 characters. This restores the original behavior, but might result in the component crashing when used with overly long content. (APPDEV-14744)
  • Intent opening faulty link. (APPDEV-14749)

2.4.3​

Updates​

DataTableV2​

  • Markdown cells no longer crash on undefined or null values. (PAPA-28367)

2.4.2​

Dependency updates​

  • @dynatrace/strato-components was updated to version 1.9.2.

2.4.1​

Updates​

Select​

  • Fixed invalid DOM property by using autoComplete instead of autocomplete. (APPDEV-14650)

2.4.0​

Dependency updates​

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

Deprecations​

DataTableV2​

  • DataTableV2CellInteractionPattern feature flag is now deprecated and will be removed in the future. (APPDEV-14252)

Updates​

Charts​

  • Added support for async series actions for every chart.

AnnotationsChart​

  • Added support for testId, style, classname and mask properties. (APPDEV-14504)
  • A bug was fixed cutting the markers at the beginning when no labels in AnnotationsChart. (APPDEV-14620)

CategoricalBarChart​

  • The contents of the threshold tooltip don't truncate anymore. (APPDEV-14012)
  • Range threshold pills now have a minimum size equal to point thresholds. (APPDEV-14013)

DataTableV2​

  • Column ordering is now supported in combination with column pinning. Unpinned columns can be re-ordered via column actions and the column settings modal. (APPDEV-14039)
  • onActiveRowChange is now called once instead of twice when autoActivate is false. (APPDEV-14458)
  • The configuration object of the interactiveRows prop now allows to define a link for rows, with which the given link can now also be opened in a new tab in the background. (APPDEV-14106)
  • User actions menu trigger is now correctly positioned when the column is right-aligned. (APPDEV-14485)
  • Columns of type meterbar can now be reordered via drag and drop. This column type now also supports common built-in column actions, such as TableActionsMenu.HideColumn, TableActionsMenu.ColumnOrder and TableActionsMenu.ColumnPinning. (APPDEV-14500)

DateTimePicker​

  • Fixed invalid language tag error by defaulting to English locale. (APPDEV-14609)

DonutChart​

  • Now the ratio prop is available when the legend is positioned on the right. (APPDEV-14258)

DQLEditor​

  • Cached validity information about a query is now cleared after 3 seconds. (APPDEV-14421)
  • Autocomplete now fetches up to 10,000 suggestions. (APPDEV-14420)

FilterField​

  • Added support for JSONPath in keys. (APPDEV-14098)
  • The filter statement delete button is now properly aligned with the filter statements. (APPDEV-14472)

HistogramChart​

  • Range threshold pills now have a minimum size equal to point thresholds. (APPDEV-14013)
  • Fixed app icons not showing on Intents on SelectionArea Tooltip. (APPDEV-14482)
  • Threshold's tooltip does not truncate its contents anymore. (APPDEV-14012)
  • Fixed temporary zoom mode allowing highlighting of DataPoints. (APPDEV-14570)

HoneycombChart​

  • Added support for testId, style, classname and mask properties. (APPDEV-14504)

Markdown​

  • Markdown-style formatting is now limited to 20,000 characters, the remaining content is displayed as plain text. This prevents page crashes due to overly long content. (APPDEV-14376)
  • Intents without response are now rendered as a link. (APPDEV-14153)
  • Intent can be disabled.

PieChart​

  • Now the ratio prop is available when the legend is positioned on the right. (APPDEV-14258)

Select​

  • All internal data-testids are removed to align with our overall convention of not having internal hardcoded test ids. (APPDEV-14085)
  • No longer shows autocompletion when interacting. (APPDEV-14576)

SingleValue​

  • Added support for testId, style, classname and mask properties (APPDEV-14504)

SingleValueGrid​

  • Added support for testId, style, classname and mask properties (APPDEV-14504)

TextArea​

  • Providing a custom onBlur function no longer breaks the focus ring behavior or styles or other internal onBlur behavior. (APPDEV-14486)

TimeframeSelector​

  • Fixed invalid language tag error by defaulting to English locale. (APPDEV-14609)
  • Error message is now displayed correctly when only min or max is set. (APPDEV-14328)

TimeseriesChart​

  • Fixed app icons not showing on Intents on SelectionArea Tooltip. (APPDEV-14482)
  • Now TimeseriesChart supports ColorRules (APPDEV-14008)
  • Fixed temporary zoom mode allowing highlighting of DataPoints. (APPDEV-14570)
  • Threshold's tooltip does not truncate its contents anymore. (APPDEV-14012)
  • Range threshold pills now have a minimum size equal to point thresholds. (APPDEV-14013)

Tooltip​

  • Fixing overflow issue in the tooltip affecting the MapView (APPDEV-14580)

XYChart​

  • Range threshold pills now have a minimum size equal to point thresholds. (APPDEV-14013)
  • Fixed temporary zoom mode allowing highlighting of DataPoints. (APPDEV-14570)
  • Fixed zoom selection area highlighting datapoints. (APPDEV-14516)
  • The content of the threshold tooltip doesn't truncate anymore. (APPDEV-14012)
  • Fixed app icons not showing on Intents on SelectionArea Tooltip. (APPDEV-14482)
  • Fixed an issue where the correct truncation mode was not being applied to the dot legend. (APPDEV-14470)

2.3.3​

XYChart​

  • Updated invalid valueAccessor log to only log once per chart and set level to warn. (APPDEV-14819)

2.3.2​

Updates​

DateTimePicker​

  • Fixed invalid language tag error by defaulting to English locale. (APPDEV-14609)

TimeframeSelector​

  • Fixed invalid language tag error by defaulting to English locale. (APPDEV-14609)

2.3.1​

Updates​

Tabs​

  • Removed aria-controls from inactive tabs. (APPDEV-14490)

2.3.0​

Dependency updates​

  • Changed peerDependency version range for @dynatrace-sdk/react-hooks from ^1.4.1 to ^1.5.3. (APPDEV-14277)
  • @dynatrace/strato-components was updated to version 1.9.0.

Deprecations​

Forms​

  • The TimeframeV2 type has been deprecated, please use the Timeframe type instead. (APPDEV-13889)

SelectV2​

  • The SelectV2 and all it's types and subcomponents that include SelectV2 in their name are now deprecated. Please use Select instead. (APPDEV-13889)

Updates​

Charts​

  • Now allows moving the toolbar with arrow keys when focused. (APPOBS-9390)

Conversion-Utilities​

  • The queryResult prop of the DQLResultConverter component and the convertQueryResultToTimeseries function, as well as the records prop of the convertToTimeseries function now also support the TypedQueryResult type from @dynatrace-sdk/react-hooks. (APPDEV-14277)

CategoricalBarChart​

  • Now displays thresholds on top of the series shapes. (APPDEV-13289)

CodeSnippet​

  • Added an ErrorBoundary to catch errors with syntax highlighting. (APPDEV-14313)

DataTableV2​

  • Now allows for more than 10k rows to be displayed in Firefox without pagination. (APPDEV-14010)

FilterField​

  • Added support for FilterField search operator. (APPDEV-13977)
  • Now shows caret in empty FilterField when focused. (APPDEV-14370)
  • Now automatically adds a space at the end of a statement when clicking into the FilterField. (APPDEV-12589)
  • All internal data-testids are removed to align with the behavior of other components. (APPDEV-14084)
  • The props style, className, and data-testid can now be set on FilterField.Suggestions. (APPDEV-13925)
  • When contains is typed as an operator, it's now correctly marked as an error. (APPDEV-14403)
  • When inserting a value suggestion in a list, the cursor doesn't move outside of the brackets now. (APPDEV-14352)

FormField​

  • The props data-dtrum-allow, data-dtrum-mask, style, className, and data-testid can now be set on FormFieldMessages. (APPDEV-13925)

HistogramChart​

  • Display Thresholds on top of the series shapes. (APPDEV-13289)
  • Dynamic threshold pills now show the whole Y range of the threshold and the left and rightmost values. (APPDEV-13809)
  • Add ColorRule slot. (APPDEV-14086)

NotifyButton​

  • The props style, className, and data-testid can now be set on NotifyButton.Content. (APPDEV-13925)

SegmentSelector​

  • If there are no variables available for a segment, the corresponding empty message now includes an action to manage the segments directly in the app. (APPDEV-14398)

SingleValue​

  • The prop applyThresholdBackground in the SingleValue now only changes the background in case any threshold is met. (APPDEV-14103)
  • Fixing undefined error on formatting value. (APPDEV-14402)

TimeseriesChart​

  • Display Thresholds on top of the series shapes. (APPDEV-13289)
  • Dynamic threshold pills now show the whole Y range of the threshold and the left and rightmost values.
  • Fixed an issue where the chart would crash if all data points had a null value in the value property. (APPDEV-14358)

XYChart​

  • Fixed SynchronizedCrosshair staying disabled after Selection reset. (APPDEV-14453)
  • Display Thresholds on top of the series shapes. (APPDEV-13289)
  • Fixes colorPalette coloring for when DotSeries has data in the series slot. (APPDEV-14329)
  • Now the XYChart highlights the datapoints included within the selection. (APPDEV-11895)
  • Custom actions and intents for the select interaction are now supported. (APPDEV-13734)
  • Added a log to register every time an invalid value is passed to a RectSeries. (APPDEV-14015)

2.2.2​

Updates​

Tabs​

  • Removed aria-controls from inactive tabs. (APPDEV-14490)

2.2.1​

Updates​

SegmentSelector​

  • If there are no variables available for a segment, the corresponding empty message now includes an action to manage the segments directly in the app. (APPDEV-14398)

2.2.0​

Dependency updates​

  • @dynatrace/strato-components was updated to version 1.8.1.

Updates​

Charts​

  • Fixed style in hovered selection knob. (APPDEV-14093)
  • The legend now shows a tooltip when truncation is set to start or end. (APPDEV-14230)

CodeSnippet​

  • Line numbers with more than two digits no longer break into a new line when lineBreak is enabled. (APPDEV-14283)

DataTableV2​

  • Rows with disabled row selection are no longer de-selectable when no selection limit is specified. (APPDEV-14133)
  • Resized handle on last column does not contribute to table width anymore, preventing unnecessary scrollbars. (APPDEV-14195)
  • When reordering rows via drag and drop using the keyboard, the focus styles now remain visible on the dragged row. (APPDEV-12928)
  • Now row heights are also remeasured when the column definition changes. (APPDEV-14315)
  • Now supports controlled column pinning via the pinnedColumns prop and onPinnedColumnsChange callback. (APPDEV-12407)
  • Screen readers now announce that the column settings were successfully reset to default. (APPDEV-14123)
  • Clicking an overlay triggered from a cell within an interactive row no longer activates the row. (APPDEV-14285)
  • Hovering over a column action header and displaying the menu button no longer affects its width. (APPDEV-14068)
  • Pressing Escape to cancel row ordering via drag and drop now correctly restores the row order. (APPDEV-12928)
  • The DataTableV2 component and its sub-components now support spreading remaining props to their respective root elements. (APPDEV-12981)
  • The aria-label for the column resize handler button is now more informative. It uses the table header text when available, falling back to the column ID if not. (APPDEV-14173)
  • When dragging a row within a scrollable table containing many virtualized rows, the drag operation no longer gets stuck. (APPDEV-12928)
  • The type guards isDataTableV2GroupColumnDef and isDataTableV2DisplayColumnDef are now exposed in the public API. (APPDEV-13741)

DateTimePicker​

  • Date-only picker now correctly handles negative UTC timezones. (APPDEV-14250)

DQLEditor​

  • History undo now reliably reverts changes as expected. (APPDEV-14130)

FilterField​

  • Enabled text selection in FilterField for read-only. (APPDEV-9654)

HistogramChart​

  • Fixed an issue where the selection area would disappear when resizing the chart.
  • Updated label for dynamic thresholds value to be always Dynamic, to reflect the dynamic nature of the values. (APPDEV-13555)

InformationOverlay​

  • Removed additional spacing wrongfully introduced in previous version.
  • Screen readers now always announce the overlay's content if it is visible. (APPDEV-14181)
  • Reduced max-width of medium (960->768) and large(1334->1280) sizes. To keep the previous max-width you can pass a respective style prop to the modal. (APPDEV-14152)

SegmentSelector​

  • Documentation link now also works on empty and no access overlays. (APPDEV-14186)
  • Improved accessibility by adding aria-live region to announce selected segments after applying them. (APPDEV-14171)

SelectV2​

  • Trigger display values with spaces do not break lines anymore when using the filter. (APPDEV-14314)
  • Remaining properties are now forwarded to the sub-components. (APPDEV-12972)

SingleValue​

  • Enabled Sparkline x-axis config for SingleValue integration. (APPDEV-14253)

TextEllipsis​

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

TimeframeSelector​

  • Used fieldset to associate related controls under the Timeframe label for accessibility. (APPDEV-14172)
  • Remaining properties are now forwarded to the root of the rendered component. (APPDEV-12971)

TimeseriesChart​

  • Enabled interactions in synchronized charts by resetting on click. (APPDEV-13990)
  • Fixed an issue where the tooltip would display incorrect values when resizing the chart. (APPDEV-14094)
  • Updated label for dynamic thresholds value to be always Dynamic, to reflect the dynamic nature of the values. (APPDEV-13555)

Tooltip​

  • Now only triggers the onChange if the state really changes.

XYChart​

  • Added synchronized selection. (APPDEV-12254)
  • Added series, categories, and details on the x-axes selection tooltip. (APPDEV-13772)
  • Capitalized dynamic threshold value. (APPDEV-13555)
  • Fixed an issue where the selection area would disappear when resizing the chart.
  • Made DotSeries triangle shape slightly bigger.
  • Dynamic threshold pills now show the whole Y range of the threshold and the left and rightmost values. (APPDEV-12073)

2.1.1​

Updates​

SingleValue​

  • The prop applyThresholdBackground in the SingleValue now only changes the background in case any threshold is met. (APPDEV-14103)

2.1.0​

Updates​

Charts​

  • Point thresholds are now displayed on top of range thresholds for more clarity. (APPDEV-13377)
  • Tooltip headers now properly respect the selected timezone across all chart components. (APPDEV-13643)

DataTableV2​

  • Now supports column pinning, allowing individual columns to stay fixed on the left or right edge of the table during horizontal scrolling. Use the columnPinning prop to enable column pinning and defaultPinnedColumns to configure the initial state. (APPDEV-12407)
  • Interactive headers now also render a tooltip on hover when an ellipsis is applied. (APPDEV-12804)
  • Rows are now remeasured when table data changes. (APPDEV-14127)
  • Table headers now display column names in their ARIA labels. (APPDEV-13243)
  • The border of an expanded row does not overlap with the table header anymore. (APPDEV-13938)
  • Z-index values for the table do not conflict with the FilterField component anymore. (APPDEV-13962)
  • Now provides column pinning actions for use in the TableActionsMenu, allowing users to pin and unpin columns. (APPDEV-12407)
  • The sub-row expand buttons are now aligned correctly based on the verticalAlignment configuration in the variant prop. (APPDEV-13846)
  • Row height now remains stable when columns are virtualized while scrolling. (APPDEV-13936)

DateTimePicker​

  • Now uses English locale for languages that could break the component. (APPDEV-14065)
  • Day period in useDateTimeFormat now correctly affects hours regardless of its position. (APPDEV-13975)
  • Entering a zero for day or month now results in an invalid date (empty string returned in onChange) instead of an incorrect date. (APPDEV-13942)
  • Leading zeros in time input fields are now accepted again. (APPDEV-13927)

DQLEditor​

  • Page with DQL editor test does not fail anymore. (APPDEV-14001)

HistogramChart​

  • Fixed an issue that caused the chart not being interactive when clicking Esc.(APPDEV-13983)

HoneycombChart​

  • Added an alternative method for drawing the marker to support all browsers. (APPDEV-13855)
  • Fixed an issue that caused the chart to fail when working with ranges. (APPDEV-14061)

MeterBarChart​

  • Now the component exposes a prefixIcon prop. In the future, the <MeterBarChart.Icon/> slot will be removed. (APPDEV-12781)

MultiMeterBarChart​

  • Now the component exposes a prefixIcon prop. In the future, the <MultiMeterBarChart.Icon/> slot will be removed. (APPDEV-12781)

NumberInput​

  • The cursor now shows as not-allowed when aria-disabled is set. (APPDEV-11369)

PasswordInput​

  • The cursor now shows as not-allowed when aria-disabled is set. (APPDEV-11369)

SelectV2​

  • Remaining properties are now forwarded to the root of the rendered component. (APPDEV-12972)
  • When using a controlled SelectV2 with the showSelectedOptionsFirst, all of the options are shown and do not disappear on hover. (APPDEV-13961)

SingleValue​

  • Threshold coloring now also applies to Trend and Sparkline ticks. (APPDEV-13292)

TextInput​

  • The cursor now shows as not-allowed when aria-disabled is set. (APPDEV-11369)

TimeframeSelector​

  • Now uses English locale for languages that could break the component. (APPDEV-14065)
  • Selecting a custom preset will use the name of the preset item again. (APPDEV-13963)
  • Day period in useDateTimeFormat now correctly affects hours regardless of its position. (APPDEV-13975)
  • Leading zeros in time input fields are now accepted again. (APPDEV-13927)
  • Validation now follows the new validation concept by validating in a touched state. (APPDEV-13731)

TimeseriesChart​

  • Fixed an issue that caused the chart not being interactive when clicking Esc.

TreeMap​

  • Added an alternative method for drawing the node to support all browsers. (APPDEV-13855)

XYChart​

  • Excluded datapoints where the valueAccessor isn't a string or number. (APPDEV-13816)
  • DotSeries now doesn't display tooltip information for datapoints that are outside of the visible area. (APPDEV-14120)
  • Thresholds are now displayed on initial state even if infiniteZoom prop is active. (APPDEV-13377)
  • Now displays datapoints on plot edges. (APPDEV-11807)
  • Selection area on XYChart can now show top and bottom magnifiers based on the visibility and format of the corresponding axis. (APPDEV-13720)
  • Added custom actions support to Annotations. (APPDEV-12206)
  • Applied selected dot shape to legend and tooltip in DotSeries. (APPDEV-13935)
  • Select interaction support is now available. (APPDEV-13304)

2.0.1​

Updates​

DataTableV2​

  • The border of an expanded row does not overlap with the table header anymore. (APPDEV-13938)
  • Z-index values for the table do not conflict with the FilterField component anymore. (APPDEV-13962)
  • Row height now remains stable when columns are virtualized while scrolling. (APPDEV-13936)

DateTimePicker​

  • Day period in useDateTimeFormat now correctly affects hours regardless of its position. (APPDEV-13975)
  • Entering a zero for day or month now results in an invalid date (empty string returned in onChange) instead of an incorrect date. (APPDEV-13942)
  • Leading zeros in time input fields are now accepted again. (APPDEV-13927)

SelectV2​

  • When using a controlled SelectV2 with the showSelectedOptionsFirst, all of the options are shown and do not disappear on hover. (APPDEV-13961)

TimeframeSelector​

  • Selecting a custom preset will use the name of the preset item again. (APPDEV-13963)
  • Day period in useDateTimeFormat now correctly affects hours regardless of its position. (APPDEV-13975)
  • Leading zeros in time input fields are now accepted again. (APPDEV-13927)

2.0.0​

Breaking changes​

General​

  • Removed previously deprecated TimeUnitType, DataUnitBitType, DataUnitByteType, DataUnitType, ExponentialNumberUnitType, TimeConversionFactors, ExponentialDecimalLevels, ExponentialOctalBitLevels, ExponentialOctalByteLevels from the formatters subpackage. (APPDEV-12172)
  • DrawerProps are now correctly exposed as an internal. (APPDEV-12232)
  • Removed deprecated mock-data subpackage. (APPDEV-12252)
  • Removed popper helper from overlays subpackage. (APPDEV-12712)
  • Removed no longer used DurationMode type and CONVERSIONUNITS constants from formatters. (APPDEV-12158)

Core​

  • Removed deprecated types associated with collections, CollectionSectionProps, CollectionElement, CollectionChildren, ItemProps, ItemElement, and Node. (APPDEV-12184)
  • Removed themeOptions constant and ThemeOptions type. Please use a literal 'light' | 'dark' instead. (APPDEV-12084)
  • Removed deprecated convertEasingTokenToFramerMotion and createFramerMotionTransition. (APPDEV-12190)
  • Removed deprecated helper function isElementOverflowing. (APPDEV-12193)
  • Removed deprecated hasUncontrolledProp helper. (APPDEV-12192)
  • Removed deprecated DOMAttributes interface.
  • Removed previously deprecated helpers createElevationBoxShadowValue and createElevationFilterValue. (APPDEV-12187)
  • Removed already deprecated types HeadingLevel and HeadingTag as well as the headingLevel constant. (APPDEV-12300)
  • Removed deprecated PressEvents interface.
  • Removed deprecated isFunction utility function.
  • Removed deprecated createDomRect. (APPDEV-12188)
  • Removed deprecated types DesignToken and NumericDesignToken. (APPDEV-12191)

Forms​

  • Removed FormControlRef from the triggerRef prop of FormControlWithOverlayRef.
  • The onChange callback for form controls moved to the FormControlBaseProps, which are now generic. (APPDEV-12302)

Tables​

  • The deprecated DataTable and SimpleTable have been removed along with all associated types and functions. (APPDEV-10925)

AppCard​

  • Removed the AppCard component. (APPDEV-12636)

CodeSnippet​

  • The following deprecated language options are now removed: css-extr, diff, git, handlebars, less, makefile, ocaml, sass, scss, stylus and wasm. (APPDEV-12412)

DataTableV2​

  • The previously deprecated selectionBehavior option on the subRows prop is now removed. This change removes the support for the 'individual' selection behavior in favor of the default cascading selection behavior. (APPDEV-12402)
  • The disableColumnHiding prop to prevent columns from being hidden is now removed for header groups. To prevent a group from being hidden, use disableColumnHiding on at least one of its child columns. (APPDEV-11411)
  • The improved cell interaction pattern is now the default and included out of the box. The old cell interaction pattern has been completely removed. (APPDEV-12059)
  • The vertical alignment options 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', and 'bottom-right' are now removed from the alignment option in the column definitions, leaving only 'left', 'center' and 'right'. Vertical alignment can now only be configured globally via the table's variant prop. (APPDEV-12307)
  • The deprecated enableDragAndDrop setting is now removed from the columnOrdering prop. Drag and drop for columns is always enabled by default when using columnOrdering, and cannot be disabled independently. (APPDEV-13147)
  • Removed height property from the root API since it never had any effect. Use a style override instead. (APPDEV-12153)

FeatureHighlight​

  • Removed deprecated FeatureHighlightActionsProps. (APPDEV-12233)

FieldSet​

  • Removes deprecated prop legend. Prefer using the <FieldSet.Legend> subcomponent to provide a legend. (APPDEV-11983)
  • ForwardRef is now an HTMLDivElement instead of an HTMLFieldSetElement. (APPDEV-13110)

FilterField​

  • Removed the deprecated parserConfig. The Variable and BigInt nodes are now returned by default in the FilterFieldTree. (APPDEV-12939)
  • Introduced the FilterFieldRootNode as the initial node in a FilterFieldTree. This node is identical to the previous initial node (FilterFieldGroupNode) with the addition of a version prop to indicate the version number of the FilterFieldTree. (APPDEV-13173)
  • Removed deprecated convertFilterFieldStringWithReservedCharacters and convertFilterFieldTreeWithReservedCharacters conversion utilities. (APPDEV-12120)
  • The 'explicitLogicalOperator' flag on the 'SimpleFilterFieldGroupNode' is now required. (APPDEV-12643)

GaugeChart​

  • The slots min, max and value have been removed. (APPDEV-12292)

InputGroup​

  • The InputGroup is now a Grid instead of a Flex and aligns FormFields with labels and messages properly. (APPDEV-12833)

Microguide​

  • Removed deprecated MicroguideStepProps. (APPDEV-12234)
  • Removed deprecated constant modalSizeOptions. (APPDEV-12235)

SegmentSelector​

  • updateSegmentVariables function was removed. Variables should not be updated directly. To update variables, update the whole segment, e.g. using the setSegments function. (APPDEV-11074)
  • RemoveSegment and RemoveAllSegments no longer return a promise as the operation runs synchronously. (APPDEV-13375)

SingleValue​

  • Removed element from SingleValueRef. (APPDEV-11207)

TerminologyOverlay​

  • Removed previously deprecated TerminologyOverlayFooterProps interface. (APPDEV-12237)

TextArea​

  • The deprecated type TextAreaWidth was removed. (APPDEV-12915)

TimeframeSelector​

  • Removed deprecated TimeframeSelectorBaseProps, TimeframeSelectorControlledProps, and TimeframeSelectorControlledProps. (APPDEV-12302)

Toast​

  • Removed deprecated ToastPosition type. Prefer using the position prop on the ToastPosition. (APPDEV-12196)
  • Removed deprecated interfaces useToastNotificationConfig and useToastNotificationResult. (APPDEV-12195)

Tooltip​

  • The deprecated types TooltipPlacement and TooltipDelay are now removed. The usage has been inlined into the TooltipProps. (APPDEV-13113)

XYChart​

  • Removed deprecated HeatmapSeries, XYChartHeatmapSeriesProps, HeatmapDatapoint, and XYChartHeatmapSeriesActionItem. Use RectSeries, XYChartRectSeriesProps, RectDatapoint, XYChartRectSeriesActionItem instead. (APPDEV-11569)

Dependency updates​

  • Changed peerDependency version range for @dynatrace-sdk/client-query from ^1.17.0 to ^1.21.1. (APPDEV-10464)
  • Changed peerDependency version range for @dynatrace-sdk/react-hooks from ^1.0.0 to ^1.4.1. (APPDEV-10464)
  • Changed peerDependency version range for @dynatrace-sdk/client-filter-segment-management from ^1.4.0 to ^1.6.5. (APPDEV-10464)
  • Added @dynatrace-sdk/notifications-v2 as a peer dependency with version range ^1.0.0. (APPDEV-13607)

Deprecations​

FilterField​

  • The 'SimpleFilterFieldLogicalOperatorNode' and 'FilterFieldLogicalOperatorNode' are now deprecated and will be removed with the next breaking change. Use the 'logicalOperator' and 'explicitLogicalOperator' of the group node instead. (APPDEV-12643)

TimeframeSelector​

  • The TimeframeSelector has been moved to '@dynatrace/strato-components-preview/filters'. The import from '@dynatrace/strato-components-preview/forms' is deprecated and will be removed. (APPDEV-13631)

1.11.6​

SegmentSelector​

  • Nested arrays in segment variable values are now flattened to enhance compatibility with Grail. (APPDEV-14930)

1.11.5​

FilterField​

  • Now correctly connects error messages and aria-describedby ids. (APPDEV-14578)

1.11.4​

Charts​

  • Allow moving toolbar with arrow keys when focussed. (APPOBS-9390)

1.11.3​

SegmentSelector​

  • If there are no variables available for a segment, the corresponding empty message now includes an action to manage the segments directly in the app. (APPDEV-14398)

1.11.2​

DataTableV2​

  • Clicking an overlay triggered from a cell within an interactive row no longer activates the row. (APPDEV-14285)

1.11.1​

DataTableV2​

  • The border of an expanded row does not overlap with the table header anymore. (APPDEV-13938)
  • Z-index values for the table do not conflict with the FilterField component anymore. (APPDEV-13962)
  • Row height now remains stable when columns are virtualized while scrolling. (APPDEV-13936)

DateTimePicker​

  • Day period in useDateTimeFormat now correctly affects hours regardless of its position. (APPDEV-13975)
  • Entering a zero for day or month now results in an invalid date (empty string returned in onChange) instead of an incorrect date. (APPDEV-13942)
  • Leading zeros in time input fields are now accepted again. (APPDEV-13927)

SelectV2​

  • When using a controlled SelectV2 with the showSelectedOptionsFirst, all of the options are shown and do not disappear on hover. (APPDEV-13961)

TimeframeSelector​

  • Selecting a custom preset will use the name of the preset item again. (APPDEV-13963)
  • Day period in useDateTimeFormat now correctly affects hours regardless of its position. (APPDEV-13975)
  • Leading zeros in time input fields are now accepted again. (APPDEV-13927)

1.11.0​

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

Charts​

  • Fixed an issue that prevented collapsing the chart toolbar with the keyboard. (APPDEV-13708)

Accordion​

  • The transition duration is now set to 0 for users who prefer reduced motion. (APPDEV-12430)

AnnotationsChart​

  • Annotations Displays are now able to show reversed scale. (APPDEV-13462)

AppHeader​

  • ActionButton can be wrapped in the Tooltip component. (APPDEV-13122)

DataTableV2​

  • When horizontally scrolling a table with a lot of columns, the columns do not jump back and forth anymore. (APPDEV-13815)
  • Now there is no unnecessary table scrollbar when you have a custom cell containing TextEllipsis. (APPDEV-13783)
  • The layout of a custom empty state is now also applied correctly when the column definition is empty. (APPDEV-13715)
  • The cell prop in the column definition, used for rendering custom cells, now provides an isLineWrapped prop that indicates whether line wrap is enabled for the column in which the cell is rendered. (APPDEV-11676)

DateTimePicker​

  • Selecting a date via the Calendar now clamps the time to the specified min or max. (APPDEV-13475)

DQLEditor​

  • Autocomplete suggestions no longer include redundant trailing quotation marks. (APPDEV-13702)

FilterField​

  • Suggestions are now updated when the validatorMap is updated. (APPDEV-13737)

HistogramChart​

  • Fixed toolbar reset position on chart resize. (APPDEV-13837)
  • Enabling selection area as default behavior in explore mode. (APPDEV-13372)

HoneycombChart​

  • Applying formatter to the value inside the node. (APPDEV-13743)
  • The Menu.ItemTooltip now adjusts its width dynamically to fit the text content, no longer enforcing a fixed min-width.

Microguide​

  • The transition duration is now set to 0 for users who prefer reduced motion. (APPDEV-12430)

SegmentSelector​

  • Increased variables query limit to 10000 records and 5MB. (APPDEV-13964)

TimeframeSelector​

  • Selecting a date via the Calendar now clamps the time to the specified min or max. (APPDEV-13475)
  • Stepper now respects min and max correctly. (APPDEV-13588)

TimeseriesChart​

  • Fixed toolbar reset position on chart resize. (APPDEV-13837)
  • Enabled selection area as default behavior in explore mode. (APPDEV-13366)

Tooltip​

  • The transition duration is now set to 0 for users who prefer reduced motion. (APPDEV-12430)

XYChart​

  • Fix for small widths. Intents button now shrinks before toolbar collapses. (APPDEV-13944)
  • Annotations support is now available. (APPDEV-13984)
  • DotSeries now supports custom shapes: circle (default), square, diamond, and triangle. You can specify the shape via the shape prop on the DotSeries slot. (APPDEV-10071)
  • RectSeries tiles are now selected on hover. (APPDEV-11028)

1.10.1​

DataTableV2​

  • When horizontally scrolling a table with a lot of columns, the columns do not jump back and forth anymore. (APPDEV-13815)

1.10.0​

Dependency updates
  • @dynatrace/strato-components was updated to version 1.7.3.
Deprecations

Conversion-Utilities

  • The convertToColumns function, used for the deprecated DataTable component, is now deprecated and will be removed in the future. Additionally, DQLResultConverterTableProps is deprecated and support for table conversion will be removed from the DQLResultConverter which will continue to support only timeseries conversion.

AppHeader​

  • A new fallback app icon is now available. (APPDEV-12340)

DataTableV2​

  • Gantt chart grid density is now improved for time xAxisType time. (APPDEV-13258)
  • The built-in prefix columns and row actions column are now sticky and pinned to the left and right sides of the table respectively. (APPDEV-12346)
  • Now the loading spinner has the correct size when refetching data. (APPDEV-13279)
  • Now the onColumnOrderChange callback provides a trigger parameter that indicates if the column order was updated by the user or internally. (APPDEV-13460)

DQLEditor​

  • The autocomplete popup now appears to display additional information, even when no suggestions are available. (APPDEV-13613)

EmptyState​

  • Additional spacing between the individual slots is now removed. (APPDEV-13629)

FilterField​

  • When using a validatorMap values in quotes are correctly validated. (APPDEV-13602)
  • Starting a filter statement with 'o' will not display the styling that is used for incomplete statements, to avoid jumping when the logical OR operator is used. (APPDEV-12644)
  • Suggestion details are now placed differently depending on the overlay width to make proper use of the space available. (APPDEV-12588)

HistogramChart​

  • HistogramChart is now able to have Intents in the Select series action (APPDEV-12780)

IntentButton​

  • An IntentButton component is now available in the preview package. (APPDEV-12340)

NotificationSettings​

  • Introduces a useNotificationSettingsMenuItem for convenient usage of NotificationSettings in a Menu. (APPDEV-13353)

SegmentSelector​

  • Now blocks further requests if permissions are missing. (APPDEV-11803)
  • The placeholder is not opened anymore after clearing the last selected segment to prevent the select overlay from overlapping with the "Apply" button. (APPDEV-12697)
  • Animations added for pinning and unpinning of segment presets. (APPDEV-13605)

TimeseriesChart​

  • Reset selection area when chart is re-rendered. (APPDEV-13587)
  • TimeseriesChart is now able to have Intents in the Select series action (APPDEV-12780)
  • fix domain min is 0 instead of data-min when data has gaps. (APPDEV-13421)
  • Grouped tooltip shows datapoints sorted by y value. (APPDEV-13000)
  • Improved chart hover performance. (APPDEV-13000)

XYChart​

  • Supporting custom tooltip in the Annotations (APPDEV-12877)
  • DotSeries now doesn't display tooltip information for datapoints that are outside of the visible area. (APPDEV-13449)
  • Thresholds support is now available. (APPDEV-12892)
  • Fixed an issue where certain focus and interaction sequences with the tooltip could lead to unexpected errors in chart behavior. (APPDEV-13553)

1.9.2​

DataTableV2​

  • When horizontally scrolling a table with a lot of columns, the columns do not jump back and forth anymore. (APPDEV-13815)

1.9.1​

Dependency updates
  • @dynatrace/strato-components was updated to version 1.7.2.

1.9.0​

Dependency updates
  • @dynatrace/strato-icons was updated to version 1.5.1.
  • @dynatrace/strato-components was updated to version 1.7.1.

Accordion​

  • Introduce preliminary support for sectionId to allow smooth upgrade for strato-components-preview@2.0.0 (APPDEV-13152)

AnnotationsChart​

  • Allowing having null values in end field for time based annotation. (APPDEV-13476)

CodeSnippet​

  • Now wraps long words and urls correctly when lineBreaks are enabled. (APPDEV-13477)

DataTableV2​

  • Toggling the selection of all rows no longer crashes tables that have expandable rows configured, row ordering with drag and drop enabled and selectAllBehavior set to page. (APPDEV-13427)
  • The onActiveRowChange callback now receives the corresponding mouse, keyboard, or focus event. (APPDEV-13275)
  • Empty tables now show a custom DataTableV2.EmptyState if provided, instead of the default empty state message. (APPDEV-11986)
  • Toggling line wrapping of a specific column does not affect the line wrapping of other columns anymore. (APPDEV-13335)
  • Interactive rows can now be activated via middle click (mouse wheel click). (APPDEV-13275)
  • All cells are now wrapped in a row and a body element for improved structure and accessibility. (APPDEV-12251)
  • Now built-in column have a fixed width to prevent them from growing if the content of an expandable row is larger than the total column width. (APPDEV-13252)

FilterField​

  • Improved insertion of inclusion operator suggestions. (APPDEV-12587)

HistogramChart​

  • Fixed an issue related to HistogramChart allowing to select more than the chart in touch devices. (APPDEV-13407)

NotificationSettings​

  • We have now introduced a standalone NotificationSettings component which was previously inside the NotifyButton. (APPDEV-13322)

Page​

  • Fixes flickering in Page panels when showing / hiding panels. (APPDEV-13318)

SegmentSelector​

  • Now handles an empty variables array gracefully. (APPDEV-13581)

SelectV2​

  • Improved blur handling to prevent brief flickering of error messages. (APPDEV-13450)

TimeframeSelector​

  • Provide alternative import path from @dynatrace/strato-components-preview/filters to allow 2.0.0 upgrade path.
  • Round up the min in an error message depending on the precision. (APPDEV-12794)

TimeseriesChart​

  • Fixed an issue related to TimeseriesChart allowing to select more than the chart in touch devices. (APPDEV-13407)

Tooltip​

  • Now observes DOM changes and updates its position correctly when its children change. (APPDEV-13360)

XYChart​

  • Text for zoom-in and zoom-out shortcuts is now displayed correctly in the toolbar. (APPDEV-13346)
  • Fixed an issue related to XYChart allowing to select more than the chart in touch devices. (APPDEV-13407)
  • Added support for synchronised crosshair (APPDEV-9932)

1.8.0​

Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/units from ^1.0.2 to ^1.1.0. (APPDEV-10879)
  • @dynatrace/strato-components was updated to version 1.7.0.

Charts​

  • Fix log scale with domain of zeroes. (APPDEV-13305)
  • Fix panning through x-axis not working on touchable devices. (APPDEV-13126)
  • Timeseries Histogram when panning, onZoomChange callback runs while dragging the axis. (APPDEV-13079)
  • Threshold tooltip improvement for Timeseries, Histogram and Categorical Bar Chart (APPDEV-13196)
  • Improved the initial load performance for charts. (APPDEV-9163)

AnnotationsChart​

  • Updated markers brightness levels. (APPDEV-13084)
  • Added dynamic marker text color depending on marker background color. (APPDEV-13084)

DataTableV2​

  • No more console warning related to inert attribute. (APPDEV-13242)
  • When completing row drag and drop, the correct element stays in focus now. (APPDEV-13242)
  • Downloading large amounts of data to CSV no longer makes the browser unresponsive. (APPDEV-13257)
  • Column sizing precision is now improved, which prevents unnecessary horizontal scrollbars. (APPDEV-13159)
  • Right-clicking on a link inside an interactive cell using the improved interaction pattern now displays the browser's context menu. (APPDEV-12977)
  • Grouped columns now properly detect custom header renderer.
  • Draggable, interactive rows with zebra stripes now receive the correct styles when dragging a row up. (APPDEV-13294)

DateTimePicker​

  • The precision of the returned ISOStrings now reflects the precision set on the DateTimePicker. Only digits up to the defined precision are included. (APPDEV-10879)

Example:

Precisionbeforenow
dayyyyy-mm-ddThh:mm:ss.mmmZyyyy-mm-ddZ
minutesyyyy-mm-ddThh:mm:ss.mmmZyyyy-mm-ddThh:mmZ
secondsyyyy-mm-ddThh:mm:ss.mmmZyyyy-mm-ddThh:mm:ssZ
millisecondsyyyy-mm-ddThh:mm:ss.mmmZyyyy-mm-ddThh:mm:ss.mmmZ

FilterField​

  • The suggestion of the logical operator "OR" is still shown when a key starting with "o" is entered. (APPDEV-12415)
  • Escaped characters are now highlighted in a different color for easier distinction. (APPDEV-12585)
  • Add a max-height to the input field. This can be changed with the maxHeight style. (APPDEV-12586)
  • Suggestions with a non-string value are no longer shown in the suggestions overlay (APPDEV-13177).

MeterBarChart​

  • Enabling user actions. (APPDEV-13220)
  • Component now forwards style and classNames properly. (APPDEV-13287)

MultiMeterBarChart​

  • Enabling user actions. (APPDEV-13220)

SegmentSelector​

  • Overlay has the correct z-Index used for overlays. (APPDEV-13025)

SelectV2​

  • Resolved a warning triggered when using the controlState prop. (APPDEV-13131)
  • Value for the hidden <option> element changed: Now uses textValue when specified; otherwise, falls back to the stringified value. (APPDEV-13131)
  • Improved filtering for complex options. It is still recommended to use the textValue prop on the option if using a complex value and non-string label when filtering is enabled. (APPDEV-13188)

SingleValue​

  • Fixed component crashing when using a Unit with the default formatter.
  • Adding a gap between the icon and the value.

Sparkline​

  • Added configurable xAxis min and max values. (APPDEV-13047)
  • Fixed area stroke on Sparkline with threshold background. (APPDEV-13234)

TextEllipsis​

  • TruncationMode is now available as a public type. (APPDEV-12065)

TextInput​

  • Text is no longer shown twice when scrolling in an auto-filled text input. (APPDEV-13200)

TimeframeSelector​

  • The precision of the returned ISOStrings now reflects the precision set on the TimeframeSelector. Only digits up to the defined precision are included. (APPDEV-10879)

Example:

Precisionbeforenow
minutesyyyy-mm-ddThh:mm:ss.mmmZyyyy-mm-ddThh:mmZ
secondsyyyy-mm-ddThh:mm:ss.mmmZyyyy-mm-ddThh:mm:ssZ
millisecondsyyyy-mm-ddThh:mm:ss.mmmZyyyy-mm-ddThh:mm:ss.mmmZ

TimeseriesChart​

  • Interactions in synchronized charts now reset the selection in all synchronized charts.
  • Fix display issue when some series are empty. (APPDEV-13250)

ToggleButtonGroup​

  • aria-checked is no longer set on the radios to avoid potential a11y issues.

XYChart​

  • Improved the performance for the tooltip hovering. (APPDEV-9163)

1.7.2​

Dependency updates
  • @dynatrace/strato-components was updated to version 1.6.2.

1.7.1​

Related testing package fix for @tanstack/react-virtual@^3.18.8 dependency.

1.7.0​

Dependency updates
  • @dynatrace/strato-components was updated to version 1.6.1.
Deprecations

CodeSnippet

  • The following language options will be removed: css-extr, diff, git, handlebars, less, makefile, ocaml, sass, scss, stylus and wasm. (APPDEV-12411)

DataTableV2

  • Vertical alignment options will be removed from the column definition, leaving only horizontal alignment options (left, center, right). As a result, vertical alignment can no longer be configured at column level, but must be set globally for all header and body cells. The default vertical alignment for all cells is now top. (APPDEV-12307)
  • Column ordering enableDragAndDrop prop is now deprecated and will be removed in the future. (APPDEV-12891)

FilterField

  • The syntax prop is now deprecated and will be removed. Only the complex syntax will be supported in the future. (APPDEV-12973)

Tooltip

  • TooltipPlacement and TooltipDelay types are now deprecated and move into the TooltipProps. (APPDEV-13113)

Charts​

  • Fix tooltip and magnifiers overflow triggering charts resize. (APPDEV-13058)
  • Right position thresholds now display pill in the correct position. (APPDEV-13095)

CategoricalBarChart​

  • Add Intents to Toolbar. (APPDEV-12912)

DataTableV2​

  • Drag and drop column ordering is now enabled by default. (APPDEV-12891)
  • Modals are now prevented from closing immediately upon pressing the Enter key on an interactive row. (APPDEV-13086)
  • convertToColumnsV2 now defaults to column type text when a field has conflicting type mappings. (APPDEV-13193)
  • The variant prop now allows for globally configuring the verticalAlignment for all table cells. (APPDEV-12306)
  • Row heights are now remeasured correctly when toggling lineWrap. (APPDEV-13059)

DonutChart​

  • Add Intents to Toolbar. (APPDEV-12912)

DQLEditor​

  • Fuzzy matching for suggestions is working again.

FieldSet​

  • The fieldset element is now wrapped inside of a div to prevent a layout issue in Safari. (APPDEV-12798)

HistogramChart​

  • Add Intents to Toolbar. (APPDEV-12912)
  • Charts with infinite zoom enabled now always display pan arrows on the bottom axis if panning is possible. (APPDEV-13141)
  • Support new tooltip styles in Thresholds pills. (APPDEV-12081)

HoneycombChart​

  • Add Intents to Toolbar. (APPDEV-12912)

NotifyButton​

  • Removed default aria-describedby. (APPDEV-13046)

PieChart​

  • Add Intents to Toolbar. (APPDEV-12912)

SegmentSelector​

  • A tooltip is displayed for overflowing presets. (APPDEV-12732)
  • Now considers an empty variables array as no variables in the default segments. (APPDEV-13101)

Sheet​

  • Backdrop exit animation is now faster. (APPDEV-13014)

SingleValue​

  • Improving text scaling in single values to properly utilize available container space. (APPDEV-13127)

TimeseriesChart​

  • Fixed synchronized selection not resetting on reset in custom action. (APPDEV-13022)
  • Support new tooltip styles in Thresholds pills. (APPDEV-12081)
  • Charts with infinite zoom enabled now always display pan arrows on the bottom axis if panning is possible. (APPDEV-13141)

Tooltip​

  • Opening delay is now shorter and the closing animation/delay has been removed. (APPDEV-13032)

TreeMap​

  • Add Intents to Toolbar. (APPDEV-12912)

XYChart​

  • Zoom interactions are now available. (APPDEV-12502)
  • Add Intents to Toolbar. (APPDEV-12912)

1.6.1​

DataTableV2​

  • All strings in querySelectors are now escaped, so the table no longer crashes due to an invalid query. (APPDEV-13412)

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.
  • @dynatrace/strato-components was updated to version 1.6.0.

Charts​

  • Fixed toolbar reset on resize. (APPDEV-12778)
  • Now all charts contain aria-label a11y attribute. (APPDEV-12893)

Forms​

  • aria-disabled properties are now only added when explicitly set. (APPDEV-12950)

DataTableV2​

  • Gantt chart tooltips are now consistently rendered within the viewport. (APPDEV-11031)
  • Now column ordering with drag and drop works correctly with hidden columns. (APPDEV-13029)
  • Built-in prefix columns should no longer become wider when rows are expanded. (APPDEV-12635)
  • Enhanced user experience for column order drag-and-drop. (APPDEV-12448)
  • Expanding and collapsing rows now maintains the table's current scroll position. (APPDEV-12946)

DateTimePicker​

  • Clicking the label or the input will now focus the first spin button. (APPDEV-12698)

DQLEditor​

  • The onValidationStart and onValidationEnd callbacks are now also triggered when the DQL query is reverted to its original value within the debounce timeframe. (APPDEV-11031)

FilterField​

  • FilterField.Suggestions wrapper is now optional. (APPDEV-13016)
  • The suggestionType now returns value for values starting with an invalid character, e.g. $. (APPDEV-12940)
  • Composed characters are now properly supported and no longer lead to crashes / unexpected input. (APPDEV-11244)

HistogramChart​

  • Allow zoom mode to be enabled programmatically. (APPDEV-12942)

TimeframeSelector​

  • The timeframe stepper buttons can now reach the min and max values for both absolute and relative times. (APPDEV-10873)
  • Clicking the label inside the Overlay or the input will now focus the first spin button. (APPDEV-12698)

TimeseriesChart​

  • TimeseriesChart is now able to have Intents within the series action. (APPDEV-12913)
  • Allow zoom mode to be enabled programmatically. (APPDEV-12942)

XYChart​

  • RectSeries now displays its valueAccessorLabel if defined on the Tooltip Header. (APPDEV-13035)
  • Now y-axis labels are no longer cut off in cases of long categories. (APPDEV-12918)

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-components was updated to version 1.5.0.
  • @dynatrace/strato-icons was updated to version 1.4.0.
Deprecations

DataTableV2

  • Now the selectionBehavior option for sub-rows is deprecated. (APPDEV-12401)

FilterField

  • The parserConfig prop is deprecated and will be removed with the next breaking change. Variables / bigint numbers will be converted to nodes with type Variable / BigInt by default.

TextArea

  • TextAreaWidth type is now deprecated and is replaced with an inline type on TextAreaProps.width. (APPDEV-12915)

Charts​

  • Now undefined and null values are stringified when downloading as CSV. (APPDEV-12715)
  • Modify Charts Toolbar to support Intents and new design. (APPDEV-12766)
  • Add Intent slot. (APPDEV-12766)

CodeSnippet​

  • Now the highlighting for bash is supported again. (APPDEV-12817)

DataTableV2​

  • Improved interaction pattern now supports column ordering via drag and drop. (APPDEV-12863)
  • Expanded rows now occupy the full table width in Chrome when dragged and dropped to the bottom of the table. (APPDEV-12818)
  • The Select All Rows action is now disabled if the table is empty or row selection is disabled for all rows. (APPDEV-12790)
  • The custom cell rendering format function now respects the provided value rather than defaulting to the cell's value. (APPDEV-12896)
  • Now undefined and null values are stringified when downloading as CSV. (APPDEV-12715)
  • Cell actions, column actions, row actions, and the toolbar now support intent items. (APPDEV-12096)
  • Now the drag and drop handle can also be disabled for certain rows, and the useLockedRowOrder hook helps to sort disabled rows to the start or end of the table. (APPDEV-12517)
  • Row height is now correct after expanding/collapsing rows that contain Markdown content. (APPDEV-12680)

DateTimePicker​

  • Now will return an empty string when the value is invalid. (APPDEV-12694)

FilterField​

  • Position operators are part of the value and do not change the operator type if they are escaped. (APPDEV-12851)
  • Added FILTERFIELD_DEFAULT_OPERATORS so they can be used in a validatorMap.
  • Add support for parserConfig to enable conversion of Variable or BigInt nodes in the syntax tree.
  • Variables used in filter values are now returned as value node with type Variable if enabled in the parserConfig. (APPDEV-12795)
  • Inserting a suggestion with the replace token strategy no longer removes quotes if the current token is already escaped. (APPDEV-12727)
  • Numbers that are bigger than Number.MAX_SAFE_INTEGER are now converted to BigInt, if enabled in the parserConfig. (APPDEV-12468)

HistogramChart​

  • Fixed toolbar not shown when re-entering chart with active Selection (APPDEV-12874)
  • Selection doesn't disappear when hovering over Toolbar. (APPDEV-12573)
  • Fixed several x-axis select toolbar and keyboard interaction issues (APPDEV-12825)
  • Supporting custom tooltip in the Annotations (APPDEV-12682)

HoneycombChart​

  • Fixed a bug in HoneycombChart. Now the truncated value fit within node boundaries. (APPDEV-12858)
  • HoneycombChart has a bug fixed allowing it to update when labels or names are updated. (APPDEV-12857)

Page​

  • tabIndex on Panel can now be customized. (APPDEV-12353)

Radio​

  • Improved focus styles of the radio for better differentiation of focused and default radios. (APPDEV-11709)

SingleValue​

  • SingleValue now is able to color its background based on the threshold value. (APPDEV-12683)

SingleValueGrid​

  • SingleValueGrid now is able to color the background of all its internal components based on the threshold value. (APPDEV-12684)

TimeseriesChart​

  • Add Intents to Toolbar. (APPDEV-12766)
  • Fix tooltip, crosshair and magnifier not disappearing when hovering Toolbar. (APPDEV-12739)
  • Fixed several x-axis select toolbar and keyboard interaction issues. (APPDEV-12825)
  • Fixed toolbar not shown when re-entering chart with active Selection. (APPDEV-12874)
  • Selection doesn't disappear when hovering over Toolbar. (APPDEV-12573)
  • Supporting custom tooltip in the Annotations. (APPDEV-12682)

XYChart​

  • Toolbar configuration via slot now available. (APPDEV-11944)
  • Tooltip body text presents a better wrapping strategy to avoid word-breaking cases. (APPDEV-12543)
  • Allow null, undefined and NaN values for the valueAccessor on RectSeries. (APPDEV-12715)

1.4.2​

DataTableV2​

  • Columns with a defined maxWidth can be resized again. (APPDEV-12909)

1.4.1​

DataTableV2​

  • Columns that define content widths with maximum widths now use the content widths correctly. (APPDEV-12735)

1.4.0​

Dependency updates
  • @dynatrace/strato-icons was updated to version 1.3.0.
  • @dynatrace/strato-components was updated to version 1.4.0.
Deprecations

Overlays

  • observeOverlaySize modifier is now deprecated and will be moved to an internal. (APPDEV-12712)

AppCard

  • Deprecated due to the limited use of the component. (APPDEV-11728)

Charts​

  • All charts now supports consistently the text truncation in the legend. (APPDEV-12550)

Accordion​

  • Sections within the Accordion can now receive a number as id as well. (APPDEV-12700)

DataTableV2​

  • In the DataTableV2CellInteractionPattern clicks to the header actions button no longer has a sorting side effect in tests. (APPDEV-12679)
  • Sub-rows expand/collapse all icon is now updated correctly when state changes. (APPDEV-12767)
  • Now row virtualization has reduced overhead for measuring row heights. (APPDEV-12537)
  • Row details template no longer excessively rerenders. (APPDEV-12757)
  • Minimum height of the DataTable is calculated correctly for contained visualVariantOption. (APPDEV-12788)
  • Rows heights are now calculated correctly when visualVariant.headers is set to 'hidden'. (APPDEV-12623)
  • Now ensures the correct display state is set before recalculating row heights. (APPDEV-12546)
  • Now supports ordering of expandable rows. (APPDEV-12000)
  • Sorting and column action indicators in the improved interaction pattern no longer resize the table header cells on hover. (APPDEV-12474)
  • Custom column headers using DataTableV2.DefaultCell now have correct spacing when using the improved interaction pattern. (APPDEV-12699)
  • Dragging a row within a scrollable table can no longer break out of the table area restriction, preventing a crash due to undefined elements. (APPDEV-12660)

DateTimePicker​

  • Incomplete dates show error on Blur. (APPDEV-12528)

DQLEditor​

  • The onValidationStart and onValidationEnd callbacks are now also triggered for previously seen DQL queries. (APPDEV-12138)
  • The onValidationEnd callback now receives the validation results for the DQL query as a parameter. (APPDEV-12138)

FilterField​

  • FilterField key suggestions include an icon to indicate the supported type if used with a validatorMap (APPDEV-11718).
  • Type annotations for value suggestions are now displayed when restricted with a validatorMap. (APPDEV-11719)
  • Only global or default operators are suggested for empty objects in the keyPredicates of the validatorMap. (APPDEV-12691)
  • The textValue is optional when calling the convertFilterFieldTreeToString function to simplify programmatically creating a FilterFieldTree. This also means that the resulting string may differ from the original FilterField statement. (APPDEV-11190)
  • ValidatorMap now also supports negated string operators (not-starts-with, not-contains, not-ends-with). (APPDEV-12416)
  • The validatorMap has been extended by the FilterFieldValuePredicateFn to validate the value of a FilterField statement. The function allows for boolean return values to indicate whether the value is valid or a string to indicate that the value is invalid and provide a custom error message. (APPDEV-12627)
  • The LogicalOperator node is not part of the FilterFieldTree anymore. Instead, the FilterFieldGroupNode has a explicitLogicalOperator flag, to indicate whether the statement has a logical operator. This also means that the resulting string may differ from the original FilterField statement. For example in the basic syntax mode the statement a = 1 AND b = 2 would be changed to a = 1 b = 2, when converting it to a FilterFieldTree and back into a string (APPDEV-11003)
  • Update comparator suggestions when validatorMap is updated.

HelpMenu​

  • Now provides an optional onOpenChange prop to handle the HelpMenu opening. (APPDEV-12621)

HistogramChart​

  • When Explore/Zoom mode is selected by keyboard, there is a focus on selected area (APPDEV-11913)
  • Focus set on chart when zoom to selection by keyboard (APPDEV-12789)
  • Disabling datapoint updates on hover when the tooltip is pinned. (APPDEV-12670)
  • HistogramChart is now able to:
  • cancel the selection pressing Esc
  • move the selection with arrows
  • pan with alt + horizontal scroll (APPDEV-12197)
  • HistogramChart is now able to move the selection. (APPDEV-12371)
  • A bug showing a tooltip while in zoom or pan mode and doing double click to reset, was fixed in HistogramChart (APPDEV-12740)
  • HistogramChart toolbar shortcuts now display cmd/ctrl depending on the OS (APPDEV-12574)

HoneycombChart​

  • The tooltip text width is not anymore proportional to the tile size. (APPDEV-12754)

Page​

  • Panel role is now applied to the correct element.

SegmentSelector​

  • Now shows pinned and recent segments in the overlay and allows editing them. (APPDEV-10523)

SelectV2​

  • Conditionally rendered children in the <Select.Option> no longer reflect in the aria-label. (APPDEV-12749)
  • The 'Select all' / 'Clear selection' options are no longer shown when the user is filtering. The 'Select all' option is also hidden now in multi selects if no options are available. (APPDEV-10348)

Sparkline​

  • Context values now adapt its width to remove unnecessary space. (APPDEV-12575)

TimeframeSelector​

  • TimeframeStepper buttons now use aria-label instead of aria-labelledBy. (APPDEV-12776)
  • Default min and max match grail limitations. (APPDEV-10732)

TimeseriesChart​

  • Focus set on chart when zoom to selection by keyboard (APPDEV-12789)

  • Disabling datapoint updates on hover when the tooltip is pinned. (APPDEV-12670)

  • A bug showing a tooltip while in zoom or pan mode and doing double click to reset, was fixed in TimeseriesChart (APPDEV-12740)

  • TimeseriesChart is now able to:

  • cancel the selection pressing Esc

  • move the selection with arrows

  • pan with alt + horizontal scroll

  • TimeseriesChart toolbar shortcuts now display cmd/ctrl depending on the OS (APPDEV-12574)

  • TimeseriesChart is now able to move the selection. (APPDEV-12197)

  • When Explore/Zoom mode is selected by keyboard, there is a focus on selected area (APPDEV-11913)

XYChart​

  • RectSeries has the new property valueAccessorLabel. It allows the user to set a custom name for the value of the series. (APPDEV-12590)
  • RectSeries and its legend it's now properly colorized for cases containing one cell. (APPDEV-12624)
  • RectSeries Range coloring now applies the values passed via valueMin and valueMax of the series. (APPDEV-12279)
  • Color-palette now supports an empty array. (APPDEV-12629)

1.3.4​

AppHeader​

  • ActionItems can now again support any custom children. (APPDEV-12797)

1.3.3​

DataTableV2​

  • Columns that define content aware sizes with maximum widths are now sized correctly. (APPDEV-12735)

1.3.2​

Docs updates
  • @dynatrace/strato-components-preview-docs was updated to version 1.3.2.

1.3.1​

DataTableV2​

  • Horizontal scrolling no longer crashes the table when column IDs contain quotes. (APPDEV-12734)

1.3.0​

Dependency updates
  • @dynatrace/strato-icons was updated to version 1.2.0.
  • @dynatrace/strato-components was updated to version 1.3.0.

Charts​

  • Magnifier style update (APPDEV-12389)
  • The ChartLayout now doesn't rerender while toggling the legend. (APPDEV-12393)
  • Prevent chart crashing when pinning the tooltip with the right button in XYChart, TimeseriesChart, HistogramChart. (APPDEV-12439)

Editors​

  • No longer capture input from DateTimePicker. (APPDEV-12475)

AppHeader​

  • ActionItems now collapse as a whole. (APPDEV-12123)

ChipGroup​

  • No longer infinitely re-renders if the parent width is too small. (APPDEV-12544)

DataTableV2​

  • Interactive rows now span the correct columns after changing column visibility. This allows the spacer column to always fill the entire remaining space. (APPDEV-12554)
  • Row actions column is not resizable anymore. (APPDEV-12450)
  • Expanding all sub-rows via the toggle in the header calls onOpenSubRowsChange with the correct value. (APPDEV-12600)
  • Column settings modal can now be opened programmatically using openColumnSettings(). (APPDEV-11760)
  • onActiveRowChange no longer gets fired twice with new cell interaction pattern. (APPDEV-12541)
  • Now supports ordering of sub-rows. (APPDEV-11999)
  • Log content columns now show an ellipsis if a log line was truncated. (APPDEV-12437)
  • With the improved cell interaction pattern, the cell actions menu no longer closes when the mouse pointer moves outside the menu after hovering over it. (APPDEV-12482)

DQLEditor​

  • Now supports syntax highlighting for array access. (APPDEV-11256)
  • Syntax highlighting now supports empty array brackets. (APPDEV-12427)
  • No longer crashes for extremely long double-quoted strings on one line (for example, 15 million characters). (APPDEV-12467)

FieldSet​

  • Adjusted the legend's font size so that it better fits with designs. (APPDEV-12381)

FilterField​

  • Identifier starting with reserved character is marked as an error. (APPDEV-12256)
  • Added key and value suggestions for auto-suggestions. (APPDEV-11704)
  • Allows configuring matches-phrase comparator (~, !~) via validator map. (APPDEV-12244)

FormField​

  • Screen reader now skips reading out "star" when a field is set as required. (APPDEV-12391)

GaugeChart​

  • The component is now always rendering min, max and value (opt out disabled). (APPDEV-11739)

HelpMenu​

  • The default implementation of the about entry now opens the hub via intent and not via external link. (APPDEV-12619)

HistogramChart​

  • Some minor styling issues in the Selection component were fixed. (APPDEV-11093)
  • Zoom actions are no longer triggering if the specific chart interaction is not enabled. (APPDEV-12479)

HoneycombChart​

  • Adding proper vertical center alignment for label and value in the nodes. (APPDEV-12496)

InputGroup​

  • Adds InputGroup component. (APPDEV-12141)

SimpleTableV2​

  • Columns property is no longer reflected to the DOM. (APPDEV-12549)

SingleValueGrid​

  • Fix error after passing color: null (APPDEV-12514)

TimeseriesChart​

  • Adding support for zoom mode in the interactions. (APPDEV-12522)
  • TimeseriesChart now is able to show datapoints whilst doing the selection. (APPDEV-11093)
  • Implemented synchronized selection area. (APPDEV-12097)
  • Zoom actions are no longer triggering if the specific chart interaction is not enabled. (APPDEV-12479)
  • Introduce custom actions for selection area tooltip. (APPDEV-10807)
  • Some minor styling issues in the Selection component were fixed. (APPDEV-11093)

XYChart​

  • Added support for unit and formatter in Logarithmic Axis of XYChart. (APPDEV-12248)
  • DotSeries now displays a grid layout in the background. Only applies when RectSeries is not present. (APPDEV-12228)
  • Magnifiers now display the correct format for the axes of type time that are reversed. (APPDEV-12432)

1.2.1​

HelpMenu​

  • target property of HelpMenuLink entries is properly applied. The default of the target is set to _blank. (APPDEV-12030)

1.2.0​

Dependency updates
  • @dynatrace/strato-components was updated to version 1.2.0.
Deprecations

Core

  • headingLevel, HeadingLevel and HeadingTag are now deprecated. (APPDEV-12300)

Mock-Data

  • Deprecated the mock-data subpackage. (APPDEV-12252)

Overlays

  • DrawerProps is now deprecated as it will move to an internal. (APPDEV-12232)

FeatureHighlight

  • FeatureHighlightActionProps is now deprecated. (APPDEV-12233)

Modal

  • modalSizeOptions constant is now deprecated. (APPDEV-12235)

TerminologyOverlay

  • TerminologyOverlayFooterProps are now deprecated. (APPDEV-12237)

Toast

  • type ToastPosition is now deprecated, prefer literal type. (APPDEV-12196)
  • Interfaces useToastNotificationConfig and useToastNotificationResult are now deprecated as they are unused. (APPDEV-12195)

Charts​

  • Axis magnifiers for Timeseries chart are no longer displaced when scrolling. (APPDEV-12102)
  • Axis magnifiers for XY chart are no longer displaced when scrolling. (APPDEV-12102)

Forms​

  • The onChange is now also optional when used in combination with value.

Accordion​

  • Now the aria-labelledby attribute in the Accordion.SectionContent references the correct label element, and the aria-controls attribute in the Accordion.Section trigger is set if the content element is present. (APPDEV-12225)

AppHeader​

  • AppHeader.Menus is now available to group HelpMenu and settings to comply with GUIDE. (APPDEV-12122)

CategoricalBarChart​

  • Fixed apdex and status color palettes not working in color palette's single-mode. (APPDEV-12137)

DataTableV2​

  • Now the consumers className and style is properly applied to the Toolbar slot component. (APPDEV-12374)
  • Now the row details height is calculated properly when expanded. (APPDEV-12358)
  • The table is not flickering when sub-rows are configured and the height of the cells is customized. (APPDEV-12257)
  • Now, the threshold highlighting works correctly when a value meets multiple threshold rules. (APPDEV-12349)
  • Interactive rows are only activated or deactivated when the primary button is clicked. (APPDEV-12423)
  • Column type now allows long to support large Grail numbers. (APPDEV-12403)
  • Now when the pageSize is changed the table height is always calculated properly. (APPDEV-12106)
  • Columns can now be ordered via drag-and-drop. (APPDEV-9899)
  • Visual improvements for row ordering: no more unnecessary scrollbars, adjusted spacings and background colors. (APPDEV-9898)
  • The heights of rows are now correctly remeasured when the whole DataTableV2 resizes. (APPDEV-12375)
  • Log content columns now provide a truncationLimit configuration property, allowing to override or disable the log truncation limit. If not specified, the truncation limit defaults to 1000 characters. (APPDEV-11007)
  • CSV table download now uses the correct file name in Chrome. (APPDEV-12356)

DateTimePicker​

  • Opening the calendar while the date selected in the DateTimePicker is invalid no longer duplicates validation error messages. (APPDEV-12444)

ExpandableText​

  • Space is no longer inserted where there was none. (APPDEV-12360)

FilterField​

  • When starting to type a value with a $, the correct suggestion type value is now returned in the suggestions callback. (APPDEV-12305)
  • Values for specified keys can be restricted using a FilterFieldValidatorMap. (APPDEV-11215)
  • Added error boundary for unhandled exceptions. (APPDEV-10749)
  • When operators are configured for a specific filter key (via keyPredicate options), the correct operators are suggested as part of auto suggestions and suggestions callback. (APPDEV-11704)
  • Suggestions overlay is now no longer closed when applying suggestions on touch devices. (APPDEV-12242)
  • Suggestions inserting a variable are no longer automatically escaped. (APPDEV-12305)

GaugeChart​

  • Changed SVG display to avoid overflows. (APPDEV-12035)

HelpMenu​

  • whatsNew, keyboardShortcuts, playground and about menu entries now provide out of the box behavior when set to default. (APPDEV-12126)
  • The feedback entry now also allows to have children.

HistogramChart​

  • The chart tooltip is now properly supporting the 1st rendering interaction. (APPDEV-12198)
  • HistogramChart Annotations no longer passing range numbers converted to integer (APPDEV-12266)
  • Styles have been updated on the explore mode (APPDEV-11853)
  • Fixed an issue allowing to enable pan mode when disabled. (APPDEV-12368)
  • Introduce custom actions for selection area tooltip. (APPDEV-10974)
  • Modal animation now respects prefers-reduced-motion media query. (APPDEV-12425)

Page​

  • The Panel component properly resets the width when unmounting. (APPDEV-12298)

SelectV2​

  • SelectV2 now supports the new validation concept and FormFieldMessages (APPDEV-8306)
  • Prevent interference of scrollbars and overlays in Safari. (APPDEV-11984)
  • Options with complex object values are now listed in order of selection. (APPDEV-12119)

TextInput​

  • Resetting the controlled value to undefined no longer leaves one character standing. (APPDEV-12443)

TimeseriesChart​

  • Enhance styles for zoom and selection area. (APPDEV-12167)
  • Fixing error for empty units when showing relative representation on Band variant. (APPDEV-12150)
  • Fixed an issue allowing to enable pan mode when disabled. (APPDEV-12368)

TreeMap​

  • Added support for TreeMap min and max config. (APPDEV-11437)
  • Deprecate valueAccessor prop and introduce nameAccessor instead. (APPDEV-12250)

XYChart​

  • Added valueMin and valueMax props for RectSeries to specify boundaries for value accessors when required. Only applies for numerical data. (APPDEV-10837)
  • Adds support for axes of type logarithmic. (APPDEV-11531)

1.1.4​

DateTimePicker​

  • Opening the calendar while the date selected in the DateTimePicker is invalid no longer duplicates validation error messages. (APPDEV-12444)

1.1.3​

Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/react-hooks from >= 0.6.0 < 1 to ^1.0.0. This is a correction patch that fixes a mistake introduced in version 1.0.0.

1.1.2​

Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/units from >= 0.18.11 < 1 to ^1.0.2. This is a correction patch that fixes a bug introduced in version 1.0.0. (APPDEV-12365)

DataTable​

  • Now correctly applies the highlight limit for columns of type log-content. (APPDEV-12408)

TimeframeSelector​

  • The parseTimeAsTimeValue function now only sanitizes rounded timeframe expressions by removing the now prefix (e.g. ´now+1d@d´ to ´1d@d´). Relative timeframe values are no longer sanitized. (APPDEV-12365)

1.1.1​

HistogramChart​

  • Fixed chart breaking when trying to pin the tooltip where no data was present. (APPDEV-12337)

1.1.0​

Dependency updates
  • @dynatrace/strato-components was updated to version 1.1.0.
  • @dynatrace/strato-icons was updated to version 1.1.0.
Deprecations

Core

  • Functions convertEasingTokenToFramerMotion and createFramerMotionTransition are now deprecated. (APPDEV-12190)
  • Interfaces for DesignToken and NumericDesignToken are now deprecated as they are no longer used. (APPDEV-12191)
  • hasUncontrolledProp function is now deprecated. (APPDEV-12192)
  • createDOMRect function is now deprecated. (APPDEV-12188)
  • isFunction function is now deprecated. (APPDEV-12194)
  • isElementOverflowing function is now deprecated. (APPDEV-12193)
  • The interfaces CollectionSectionProps, CollectionElement, CollectionChildren, ItemProps, ItemElement, Node are no longer in use. (APPDEV-12184)
  • Functions createElevationBoxShadowValue and createElevationFilterValue are now deprecated. (APPDEV-12187)

Charts​

  • Add toolbar styles and behaviour improvements. (APPDEV-11679)
  • Charts are now taking the whole available space when using the resizer. (APPDEV-11978)
  • Series action menu button, in the categorical legend, is now visible when resizing the legend to its minimal size. (APPDEV-11994)
  • Axis magnifiers for Categorical and Histogram charts are no longer displaced when scrolling. (APPDEV-12102)
  • Added support for inverted color palettes. (APPDEV-11850)

Accordion​

  • Now overflowing CSS styles are not cut off in expanded Accordion.SectionContent with keepMounted set. (APPDEV-11941)

AppHeader​

  • It is possible to add a help menu using the HelpMenu component. It is automatically aligned to the rightmost side of the AppHeader by default and can not be realigned. (APPDEV-12030)

CodeSnippet​

  • Now supports log content as a language. (APPDEV-10580)

DataTableV2​

  • Now, when the row density is changed dynamically, the nested header height updates correctly. (APPDEV-11966)
  • Log content columns are now measured correctly on initial render. (APPDEV-12052)
  • When ordering rows via drag and drop using the mouse, rows no longer overlap when dragged too fast. (APPDEV-9898)
  • Column order now updates if order in column definition changes. (APPDEV-12130)
  • Now, when the density of the rows is changed dynamically, the width of the columns is remeasured. (APPDEV-12015)
  • The MeterBarChart and MultiMeterBarChart in the meterbar column now vertically align with the default text. (APPDEV-12110)
  • Now when the new interaction pattern is activated in the table header, right-clicking on the sorting icon will also open the column actions menu. (APPDEV-11997)
  • Date formatter now works again with undefined/null values.
  • Added totalRowsCount prop on DataTableV2.Pagination to allow displaying "Page X of Y" with server-side pagination. (APPDEV-10257)
  • Now supports a new column type currency. Shall be used in favor of the deprecated currency units provided in the formatter property. (APPDEV-10752)
  • Sub-rows can be deactivated by setting the subRows prop to false.
  • It is now possible to re-order rows in a table using drag and drop. Using the keyboard, the space bar and arrow keys are used. (APPDEV-9898)
  • By default interactive rows are now automatically activated on focus using the keyboard. (APPDEV-11670)
  • When using pagination, collapsing a sub-row now only collapses the respective sub-row, even after all rows have been expanded via Expand all subrows. (APPDEV-12186)
  • For columns with a width of content or auto, the configured maxWidth is now already considered during measurement. This eliminates flickering. (APPDEV-12052)

DateTimePicker​

  • Date ranges are now applied correctly to the calendar selector. (APPDEV-12148)

FilterField​

  • Operators for specified keys can be restricted using a FilterFieldValidatorMap. (APPDEV-9535)

HealthIndicator​

  • Usage no longer produces css related console warning logs. (APPDEV-12227)

HistogramChart​

  • Enhanced support for touch interactions and introduce swipe gesture. (APPDEV-11930)
  • Implement zoom mode on HistogramChart. (APPDEV-10981)
  • Improved ZoomX selection area styling by adding opacity to the sides, enhancing the visibility of the selected portion of the chart. (APPDEV-10762)

HoneycombChart​

  • The HoneycombChart now is able to show labels and values in each node. (APPDEV-11916)
  • Resolved an issue where automatic color assignment for specific color palettes only functioned with lowercase values. (APPDEV-11980)
  • Now disabled menu items can show tooltips. (APPDEV-11157)
  • Overlays now remain open, when selecting a nested menu item. (APPDEV-11935)
  • Multi-level menu paths are now highlighted, making it easier to see which nested menu was opened. (APPDEV-11449)

Page​

  • The keepMounted prop now works again with simple content. (APPDEV-11075)

Radio​

  • RadioGroup and Radio now support the new validation concept and FormFieldMessages. (APPDEV-8305)

SegmentSelector​

  • Increased specificity of overwriting styles to ensure the correct styles are applied in an app. (APPDEV-12133)

TextArea​

  • Now supports the new validation concept and FormFieldMessages. (APPDEV-8308)

XYChart​

  • Resolved an issue where automatic color assignment for specific color palettes only functioned with lowercase values in the RectSeries. (APPDEV-11980)
  • Updated layout and information displayed in the tooltip for DotSeries and RectSeries. (APPDEV-11889)
  • RectSeries and DotSeries do now support field names with dot as accessors. (APPDEV-10843)
  • Displays the proper format for time axes in tooltip. (APPDEV-11808)

1.0.3​

Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/react-hooks from >= 0.6.0 < 1 to ^1.0.0. This is a correction patch that fixes a mistake introduced in version 1.0.0.

1.0.2​

Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/units from >= 0.18.11 < 1 to ^1.0.2. This is a correction patch that fixes a mistake introduced in version 1.0.0. (APPDEV-12365)

DataTable​

  • Now correctly applies the highlight limit for columns of type log-content. (APPDEV-12408)

TimeframeSelector​

  • The parseTimeAsTimeValue function now only sanitizes rounded timeframe expressions by removing the now prefix (e.g. ´now+1d@d´ to ´1d@d´). Relative timeframe values are no longer sanitized. (APPDEV-12365)

1.0.1​

FilterField​

  • convertFilterFieldStringWithReservedCharacters util works with reserved characters at the start of the value. (APPDEV-12222)
  • Values starting with $ are not marked as invalid.

1.0.0​

Breaking changes

General

  • Removed deprecated testing subpackage. Please use the @dynatrace/strato-components-preview-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-preview-testing please look into package's readme.

Charts

  • Removed deprecated exposed ref from the TreeMap component. (APPDEV-11401)
  • Removed deprecated onZoomChange prop from ChartInteractions component. (APPDEV-10475)
  • Removed deprecated MeteBarChart.Thresholds component. (APPDEV-11034)
  • Removed deprecated exposed ref from the MeterBarChart and MultiMeterBarChart components. (APPDEV-11400)

Core

  • Removed variant prop from useFocusRing. It can be replaced by using color. (APPDEV-11668)
  • _focusRingVariants and _FocusRingVariantType are now removed, as they were only used internally and were deprecated. (APPDEV-11235)
  • Text styles based on styled components are now removed. (APPDEV-9822)

Forms

  • Removed getSimplifiedExtendedISOStringFromValue helper function. (APPDEV-10575)

Typography

  • The Typography subpackage has moved to @dynatrace/strato-components and is no longer re-exported. (APPDEV-10881)

AnnotationsChart

  • Removed data prop from AnnotationsChart.Marker. (APPDEV-10458)

Chip

  • The variant prop now uses the union type 'neutral' | 'primary' | 'success' | 'warning' | 'critical' instead of the removed RoleVariantType. (APPDEV-11235)

CodeSnippet

  • Removed codeSnippetLanguages type in favor of the inlined string literal. (APPDEV-11647)

DataTableV2

  • onExpandedRowsChange and onSubRowsChange parameters now emit only Record<string, boolean>. Type true was removed. (APPDEV-11608)
  • Removed TableActionMenu. Please use TableActionsMenu instead. (APPDEV-11961)
  • Now if you want to enable and use the column ordering feature within the table you have to set a new flag prop columnOrdering to true. (APPDEV-11662)
  • TableRowActionMenu is now removed. You can use the Menu component or any other elements to define your row actions. (APPDEV-11954)
  • Remove the deprecated pageSize and pageIndex properties from the pagination property of the import/export configuration functionality. (APPDEV-10685)

DatePicker

  • Removed DatePicker. Please use DateTimePicker instead. (APPDEV-11848)

DateTimePicker

  • Removed show and hide functions from ref. Please use open and close instead.

FilterField

  • Removed tokenValue prop from FilterFieldListNode and FilterFieldErrorNode. (APPDEV-10711)
  • Removed deprecated props isEscaped and operator from type FilterFieldStringNode. (APPDEV-10084)
  • Ranges are optional when calling the convertFilterFieldTreeToString function. This also means that the spaces in the resulting string may differ from the spaces in the original FilterField statement. (APPDEV-11190)
  • Additional characters have been added to the list of reserved characters. The grammar now no longer detects reserved characters as part of a key / value automatically when starting with a letter. Reserved characters always have to be escaped when used inside a key / value.

These character are now reserved: =, <, >, !, (, ), *, ,, \, ", $, :, [, `

  • An empty list following an inclusion operator is now marked as invalid. (APPDEV-11799)
  • The FilterField component now allows statements without space in between the key, operator, and value. For example, a=b now yields the same syntax tree as a = b. (APPDEV-11022, APPDEV-11017)
  • Changed the ref to a FormControlWithOverlayRef, which also includes a validate function. The original element of the ref can be accessed via ref.element. Be aware, it also no longer shows the error initially. In case you need the initial error highlighting, call ref.current?.validate() in a useEffect that only runs on the initial render. (APPDEV-11127)

HealthIndicator

  • Removed variant prop in favor of the automatic detection of the background color. (APPDEV-11668)

HistogramChart

  • Removed priority prop from HistogramAnnotations.Track and value prop from HistogramAnnotations.Marker. (APPDEV-10458)
  • HistogramThresholdPosition and HistogramThresholdData renamed to NumericalThresholdPosition and NumericalThresholdData. These were deprecated and now are removed. (APPDEV-10785)

InformationOverlay

  • Removed variant prop. Please use the color prop instead. (APPDEV-11668)

Menu

  • Removed deprecated MenuItemTooltipWrapperProps. (APPDEV-11010)

SegmentSelector

  • Changed ref to a FormControlWithOverlay-ref, to enable form control features like validate, open, close, etc. (APPDEV-11074)

TextArea

  • Set default width to full. A migration has been provided. (APPDEV-10375)

TimeframeSelector

  • TimeframeStepper is now enabled by default. If you need to disable it, you can set stepper={false}. (APPDEV-11599)

TimeseriesChart

  • Remove priority prop from TimeseriesAnnotations.Track and data prop from TimeseriesAnnotations.Marker. (APPDEV-10458)
  • TimeseriesThresholdPosition and TimeseriesThresholdData renamed to DateThresholdPosition and DateThresholdData. These were deprecated and now are removed. (APPDEV-10785)
  • Removed deprecated SynchronizationProvider component in favor of SharedChartInteractions. (APPDEV-11045)

Tooltip

  • Changed its background color to a light shade. In case you are using custom color styles within the Tooltip they might need to be adjusted. (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/client-filter-segment-management from ^1.0.0 to ^1.4.0. (APPDEV-11243)
  • Changed peerDependency version range for @dynatrace-sdk/client-notification from ^1.7.0 to ^1.8.1. (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/client-query from ^1.3.0 to ^1.17.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-components was updated to version 1.0.0.
  • @dynatrace/strato-design-tokens was updated to version 1.0.0.
  • @dynatrace/strato-icons was updated to version 1.0.0.

0.117.73​

DataTable​

  • Now correctly applies the highlight limit for columns of type log-content. (APPDEV-12408)

0.117.72​

DataTable​

  • Log content columns are now measured correctly on initial render. (APPDEV-12054)

0.117.71​

General​

  • Restored types for the @dynatrace/strato-components-preview/testing subpackage.

0.117.70​

Dependency updates
  • @dynatrace/strato-components was updated to version 0.85.120.
Deprecations

FieldSet

  • Deprecated legend prop. (APPDEV-8564)

XYChart

  • Deprecated HeatmapSeries. Use RectSeries instead.

Charts​

  • All the visualizations containing a legend are now initializing with the optimal size when the ratio is set to auto. (APPDEV-11775)
  • Added aria-labels to the panning control buttons for Timeseries and Histogram. (APPDEV-11840)

Core​

  • The useRovingFocus hook is now correctly updating the tab indices and re-renders when a roving item is added or removed from the roving group. (APPDEV-11732)

Overlays​

  • Corrected return type of useOverlayWithTrigger hook to reflect the currently returned props.

CategoricalBarChart​

  • Now, the visualization supports log scale. (APPDEV-11044)

DataTableV2​

  • When a page is empty, pageIndex is updated to the last page that contains data. (APPDEV-11981)
  • Row actions now allow custom menu triggers again. (APPDEV-11971)
  • DataTableV2 now supports two different selection behaviors for subrows: cascading (default) and individual. This can be configured via the DataTableV2Props.subRows.selectionBehavior prop. (APPDEV-9982)
  • Column settings trigger can now display a custom label. (APPDEV-10078)
  • Columns with width: 'content' maintain a consistent width with fullWidth enabled and periodic sizing. (APPDEV-11846)
  • For uncontrolled usage, column order is now reset once column definition changes. (APPDEV-11921)
  • The height does not grow infinitely when displaying a single row and hiding the headers. (APPDEV-11909)
  • Position of the context menu in the DataTableV2 is correct again.
  • onPageIndexChange now includes whether user interaction or an internal update triggered the change. (APPDEV-11981)
  • New row interactivity now works on spacer column. (APPDEV-11832)
  • Improved rendering performance for interactive rows.

DQLEditor​

  • Now suggestions are not cut off when wrapping the DQLEditor in a transformed element. (APPDEV-11361)

HistogramChart​

  • Added some improvements to log scale. (APPDEV-10948)
  • Histogram show selected data points while selecting area. (APPDEV-11167)
  • Introduce Select interaction. (APPDEV-10973)

HoneycombChart​

  • Now honeycomb set a default color instead of removing tiles out of the boundaries of min, max. (APPDEV-11413)

TimeframeSelector​

  • TimeframeSelector now has improved aria labelling and no longer applies wrong aria-describedby attribute. (APPDEV-11977)

XYChart​

  • Renamed HeatmapSeries to RectSeries, HeatmapSeries is now deprecated. (APPDEV-11566)
  • Tooltip now displays the closest point on the DotSeries. (APPDEV-11612)

0.117.67​

DataTable​

  • Now correctly applies the highlight limit for columns of type log-content. (APPDEV-12408)

0.117.66​

DataTable​

  • Log content columns are now measured correctly on initial render. (APPDEV-12054)

0.117.65​

DataTableV2​

  • Row actions now allow custom menu triggers again. (APPDEV-11971)

0.117.64​

General​

  • Version only bump to align framer-motion dependency version with @dynatrace/strato-components-preview-testing.

0.117.63​

TimeframeSelector​

  • Now the Calendar selects the correct timeframe in dd.mm.yyyy format. (APPDEV-11947)

0.117.62​

DataTableV2​

  • Opening a header contextmenu no longer crashes the DataTableV2. (APPDEV-11867)

0.117.61​

DataTableV2​

  • Position of the context menu in the DataTableV2 is correct again.

0.117.60​

Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/units from >= 0.18.3 < 1 to >= 0.18.11 < 1.
  • @dynatrace/strato-components was updated to version 0.85.110.
Deprecations

Overlays

  • Deprecated OverlayWithTriggerProps return type of useOverlayWithTrigger hook, as well as the nested type OverlayTriggerProps. The hook only returns a subset of the deprecated type and this is now reflected in the new type. (APPDEV-11549)

General​

  • useBreakpoint hook now has better SSR support.

Charts​

  • Toolbar design updated. (APPDEV-10679)
  • Collapsed toolbar now does not prevent Escape actions from being triggered on other elements. (APPDEV-11650)
  • Treemap now supports custom width via props. (APPDEV-11072)

Content​

  • KeyboardShortcut and HealthIndicator now inherit the Container's color, if used inside it.

Core​

  • useFocusRing now has a prop color that replaces the deprecated variantand only allows 'neutral' | 'primary' | 'success' | 'warning' | 'critical' colors, as onAccent will be removed.

Editors​

  • Chrome issue with inputs being blocked after switching Tabs when being focused in an Editor is now fixed. (APPDEV-11439)
  • The controlled version of the Tabs component now functions correctly. Tabs can be blocked and unblocked using useBlocker without causing any unexpected behavior. (APPDEV-11206)

AnnotationsChart​

  • Supporting multiple emojis with multiple characters. (APPDEV-11552)
  • A bug was solved when a marker falls out of the bounds and the tooltip was still shown. (APPDEV-11590)

AppHeader​

  • AppNavLink no longer receives active underline when polymorphed to a react-router-dom NavLink. (APPDEV-11665)
  • isSelected prop applies active styles correctly again. (APPDEV-11666)

DataTableV2​

  • The fullHeight prop is now available for controlling whether to take up the full parent container height. (APPDEV-10677)
  • Empty table cells are now represented as empty strings in exported CSV table data. (APPDEV-11672)
  • Default alignment based on the column type and rowDensity styling are applied properly when rendering custom (default) cells. (APPDEV-10671)
  • ColumnSettingsModal search now follows more relaxed matching. (APPDEV-11798)
  • Expose scrollToRow function on DataTableV2Ref for imperative scrolling. (APPDEV-10394)
  • Selection behavior is disabled for interactive cells when using a touch device. (APPDEV-11371)
  • Rows are now remeasured once column visibility, column size or page index change. (APPDEV-11745)
  • Line wrap icon in DataTableV2.Toolbar now shows a tooltip on hover.
  • Markdown columns now support custom component mappings to override the default rendering behavior. (APPDEV-10618)
  • Ensure row selection prefix column is only added once. (APPDEV-11686)
  • Ensure row actions suffix column is only added once. (APPDEV-11828)
  • Improved general render performance. (APPDEV-11735)
  • Header cell rendering performance is now improved. (APPDEV-11436)
  • It is now possible to select or deselect multiple rows at once by pressing the Shift key while selecting an end row.(APPDEV-8821)

DonutChart​

  • Replaced display of slashed zero with regular zero. (APPDEV-11309)

DQLEditor​

  • Only DQL commands are now properly highlighted. (APPDEV-11613)

FilterField​

  • Aria-label is no longer duplicated. (APPDEV-11655)
  • Chrome issue with inputs being blocked after switching Tabs when being focused in a FilterField is now fixed. (APPDEV-11439)
  • Keys can be restricted in the FilterField using a FilterFieldValidatorMap. (APPDEV-9533)
  • Statement with list at the end is not automatically valid anymore. (APPDEV-11634)

GaugeChart​

  • Replaced display of slashed zero with regular zero. (APPDEV-11309)

HistogramChart​

  • Now browser zoom (by mouse shortcut) is prevented when zoom interaction is defined, loading state is active and user is hovering the chart. (APPDEV-11432)

HoneycombChart​

  • Fix an instance where nodes could not be hovered. (APPDEV-11287)
  • Hide HoneycombChart tiles with non-valid values. (APPDEV-11577)

InformationOverlay​

  • InformationOverlay now inherits the Container's color, if used inside it.
  • Now supports a custom icon.

MeterBarChart​

  • Added auto value to the size property.

SegmentSelector​

  • No longer removes faulty segments automatically and shows respective errors when wrapped in a FormField. (APPDEV-11467)

SelectV2​

  • Opening a select with a Select.Filter that is used outside the Page component no longer causes scrolling. (APPDEV-11761)

Sheet​

  • Now emits animationDone event after animation is complete. (APPDEV-11596)

SingleValue​

  • Replaced display of slashed zero with regular zero. (APPDEV-11360)

Sparkline​

  • Reduce the size of standalone datapoints on smaller charts. (APPDEV-11753)

TimeframeSelector​

  • Now the TimeframeSelector sanitizes the expression to remove the now prefix (e.g. now+1h to 1h). (APPDEV-11731)
  • Days before the introduction of CET are now handled properly. (APPDEV-11695)
  • Add a link to user documentation in the TimeframeSelector overlay. (APPDEV-11541)
  • Now all SpinButtons can be selected at the same time. (APPDEV-9528)

TimeseriesChart​

  • Now browser zoom (by mouse shortcut) is prevented when zoom interaction is defined, loading state is active and user is hovering the chart. (APPDEV-11432)
  • Prevent TimeseriesChart from applying unnecessary opacity when x-zoom is performed. (APPDEV-11354)

Toast​

  • TextEllipsis is now applied correctly when used inside a Toast container. (APPDEV-11649)

XYChart​

  • Added DotSeries component. (APPDEV-11568)

0.117.53​

TimeframeSelector​

  • Now the Calendar selects the correct timeframe in dd.mm.yyyy format. (APPDEV-11947)

0.117.52​

DataTableV2​

  • Opening a header contextmenu no longer crashes the DataTableV2. (APPDEV-11867)

0.117.51​

DataTableV2​

  • Header cell rendering performance is now improved. (APPDEV-11436)

FilterField​

  • Closing parentheses are detected as part of a value again when the value starts with escaped characters. (APPDEV-11389)

0.117.50​

Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/navigation from >= 1.0.0 to >= 1.2.1.
  • @dynatrace/strato-components was updated to version 0.85.100.
  • @dynatrace/strato-icons was updated to version 0.39.4.
Deprecations

Content

  • Deprecated variant prop from HealthIndicatorProps and color from KeyboardShortcutProps as they will be removed and will be automatically detected when used inside a container.

Core

  • The variant prop from the UseFocusRingProps and _UseFocusRingProps is also now deprecated and will be replaced by 'neutral' | 'primary' | 'success' | 'warning' | 'critical'.

DataTableV2

  • Deprecated disableColumnHiding on group columns. (APPDEV-11410)

Overlays

  • Deprecated the variant prop from InformationOverlayBaseProps, as it will be removed in favor of the color prop.

General​

  • Increased the peerDependency version range of @dynatrace-sdk/navigation to ^1.2.1, since the SegmentSelector relies on a newly delivered feature of that sdk.

Charts​

  • Allocate correct space for long y-axes labels. (APPDEV-11570)

CategoricalBarChart​

  • Added truncation mode (start, middle and end) to the axis. (APPDEV-9992)

ChipGroup​

  • Polymorphed Chip onClick is only called once when used in ChipGroup. (APPDEV-11373)

DataTable​

  • Now properly handles literal zero values in columns with bit type. (APPDEV-11496)
  • Do not throw an error when using controlled sort on column with disableSortBy set to true. (APPDEV-11523)

DataTableV2​

  • The column type sparkline can now be configured to display value indicators. (APPDEV-10917)
  • Exported CSV table data now includes sub-rows. (APPDEV-5577)
  • Fixed width can now be set on parent columns. (APPDEV-11409)
  • Cell rendering performance is now improved by memoizing the underlying cell component. (APPDEV-11436)
  • Now properly handles literal zero values in columns with bit type. (APPDEV-11508)
  • data-subrow-depth is now exposed on a cell to indicate the nesting level of a row. (APPDEV-11059)
  • Navigating via Page Up and Home keys now scrolls the respective row fully into view. (APPDEV-11374)
  • Now provides a built-in cell action TableActionsMenu.CopyItem, enabling users to copy cell values to clipboard. (APPDEV-10525)
  • Sub-menus and link items can now be configured within column and cell user actions by leveraging specific slot components. (APPDEV-9866)
  • Now the DataTableV2.SelectionChip only shows the number of selected rows that are available for selection. (APPDEV-11510)
  • Implicitly set disableColumnHiding to true on group columns if one child column has it set to true. (APPDEV-11410)
  • Vertical dividers do not cause a scrollbar anymore. (APPDEV-11574)
  • Now provides built-in table action menu groups and labels to semantically group menu items. (APPDEV-10525)
  • In a custom cell renderer the format function will now emit a stringified version of the original value if no valid formatter was applied.
  • Column resizing now also works with touch interaction. (APPDEV-10897)
  • Now the table's height is calculated correctly and the scrollbar is only shown when necessary. (APPDEV-11319)
  • Conditional render of DataTableV2.Pagination is now supported.
  • Fixed crash when no children are provided to the TableActionsMenu.

DateTimePicker​

  • Fixes validation when a required, missing value becomes valid by selecting a date from the calendar. Also removes duplicate error. (APPDEV-11289)

FilterField​

  • LogicalOperators with an invalid usage or position have the type Error.
  • Removes gap between an incomplete FilterField statement and the button to delete the statement. (APPDEV-11340)
  • Logical operator AND is not automatically returned as an error node in the convertStringToFilterFieldTree function. (APPDEV-11295)

GaugeChart​

  • Now the visualization is public.
  • Thresholds now supports colors.

HealthIndicator​

  • Added support for labels with <HealthIndicator.Label>. (APPDEV-10409)

HistogramChart​

  • Fixed the behavior after pinning a point and tooltip. After a pan or brush action, the point will now unpin as expected.

HoneycombChart​

  • Fixed space allocation for HoneycombChart tooltip value. (APPDEV-11318)
  • data-testid can now be set for Menu.Content. (APPDEV-11561)

Page​

  • Fixed page initial animation by hiding it until styles are available. (APPDEV-11471)
  • Outlets now work when using the keepMounted prop. (APPDEV-11075)

SelectV2​

  • The SelectV2 component no longer moves the focus between the filter input and hidden input, which enables proper text selection inside the filter. (APPDEV-9635)
  • Now disabled trigger has not-allowed cursor style. (APPDEV-11333)

Sparkline​

  • Fixed Sparkline log scale and context values. (APPDEV-11090)

Tabs​

  • Editors and FilterField can now be used in combination with Tabs without blocking any input. (APPDEV-11439)

TimeframeSelector​

  • The steps of the TimeframeStepper depend on how the date was set. If the timeframe was selected via calendar previously it moves by whole days, otherwise by the exact time difference. (APPDEV-10736)

TimeseriesChart​

  • Fixed the behavior after pinning a point and tooltip. After a pan or brush action, the point will now unpin as expected.
  • Improved precision of tooltip hovering over the datapoints. (APPDEV-11177)

0.117.41​

TimeframeSelector​

  • Now the Calendar selects the correct timeframe in dd.mm.yyyy format. (APPDEV-11947)

0.117.40​

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.
  • @dynatrace/strato-components was updated to version 0.85.90.

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.

Charts​

  • Fixed dark theme color not being applied on charts. (APPDEV-11070)
  • Now Heatmap subcomponents detect data provided as arrays of series properly. (APPDEV-10709)

Editors​

  • Improved performance of editors for long contents. (PAPA-22071)

DataTableV2​

  • Columns of type log-content will now only highlight the first 1000 characters.
  • The rowId and rowIndex properties are now accessible within DataTableV2.RowActions.
  • The sparkline columnType now supports the bar variant. (APPDEV-10400)
  • Fixed a maximum update depth exceeded error which occurred in certain conditions. (APPDEV-11032)

DonutChart​

  • Added unique data-testid to donut chart. Exposed data-testid to the consumer. (APPDEV-11227)

FilterBar​

  • Now keeps the pinnedState for Filterbar.Items properly. (APPDEV-11229)

FilterField​

  • A key / value starting with in is now correctly detected as string instead of InclusionOperator.

GaugeChart​

  • Now supports responsive threshold indicators.

HistogramChart​

  • Fixed threshold indicators missing on initial zoom when infinite zoom is active. (APPDEV-11285)

MeterBarChart​

  • Both Single and Multi now support new element ref interface. (APPDEV-10996)
  • Added unique data-testid to single meter bar and multi meter bar. Exposed data-testid to the consumer. (APPDEV-11227)

NotifyButton​

  • Creating a notification now triggers an error toast when the limit is reached.

Page​

  • Fixed the animation disabling of the Drawer when the reduced motion setting is enabled. (APPDEV-10763)

PieChart​

  • Added unique data-testid to pie chart. Exposed data-testid to the consumer. (APPDEV-11227)

SegmentSelector​

  • Now opens the segments management app as addon. (APPDEV-9533)

Sparkline​

  • Reduced height of context value labels. (APPDEV-11414)

TimeseriesChart​

  • Fixed Timeseries crash with a combination of relative values and no custom unit.
  • Fixed threshold indicators missing on initial zoom when infinite zoom is active. (APPDEV-11285)

TreeMap​

  • Added unique data-testid to treemap chart. Exposed data-testid to the consumer. (APPDEV-11227)
  • Added support to new element ref interface. (APPDEV-10997)

0.117.30​

Core​

  • Added new theme for log content highlighting. (APPDEV-10398)

DataTableV2​

  • Sorting of columnType: number columns is now correct when data is passed as string.
  • Converted certain properties from types to interfaces.
  • In the column settings modal, long column names with no spaces are now wrapped properly.

MeterBarChart​

  • SingleMeterBar supports negative values.
  • Make color prop optional.
  • Added react node support to labels value.

TimeframeSelector​

  • Error message for outside range values now respects default precision.

0.117.20​

Dependency updates
  • @dynatrace/strato-components was updated to version 0.85.80.
Deprecations

DataTable

  • The DataTable is now deprecated in favor of the DataTableV2.

SegmentSelector

  • Deprecated updateSegmentVariables, since segments should be changed as a complete segment e.g. by setting them with the setSegments function.

SimpleTable

  • The SimpleTable is now deprecated and will be replaced by the SimpleTableV2.

Charts​

  • The tooltip now properly calculates the best size for the body when there is a scrollbar and the virtualizer is disabled.

Sparkline​

  • Add log scale for linear and area variants.

Tabs​

  • With this update, you can now block tab switching using the useBlocker hook from react-router-dom without causing the 'Maximum update depth exceeded'-error.

Accordion​

  • Expanded state is now fully controllable in single mode as well.

CodeSnippet​

  • Now supports proper syntax highlighting for DQL strings containing escaped quotes, backticks, and backslashes.
  • The line number, content, and copy button are now horizontally aligned when there is only one line of content in condensed mode.

convertToColumnsV2​

  • Generated columns now all have a width of content applied.
  • FieldTypeType.Duration now receives a default nanosecond formatter with a cascade.

DataTable​

  • Download page and selection data works now with virtualization (uninitialized rows).

DataTableV2​

  • Date instances are now correctly sorted by default in default column types.
  • Details column no longer gets added multiple times.
  • When hiding columns the SubRow-indicator-button now adjusts the column content correctly.
  • DataTableV2.LineWrap can now be used in the DataTableV2.Toolbar for table wide line wrap control.
  • Updating the column definition now invalidates the column accessors cache avoiding access to stale data.
  • On columns with fractional widths, minWidth property is now respected.
  • Nested header row height is now correct during long loading data scenarios.
  • Column sizes are now calculated correctly on initial render when columnDef width is auto and the DataTableV2 is not fullWidth.
  • Row virtualization no longer leaves additional empty space at the end of the container.
  • When ‘Expand all SubRows’ is triggered, all disabled sub rows will now remain collapsed.
  • Ensure correct alignment for log-content columns.
  • The table now re-renders correctly whenever the initial columns prop is updated.
  • Data can now be downloaded programmatically.
  • Manual sorting configuration is now correctly reset if property configuration changes.
  • Expanding the row details on a DataTableV2 that is not full width no longer expands the width of the entire table.

DateTimePicker​

  • In weeks after a daylight savings change, the DateTimePicker no longer shows two Sundays.
  • Selecting the first day of the month now works correctly.
  • DateTimePicker now works in Safari when using time only mode.

DQLEditor​

  • Added onValidationStart and onValidationEnd callbacks.
  • Added support for proper syntax highlighting for nested property access.

FilterField​

  • Updated validation flow to improve UX.
  • Parentheses are now included in the node value when inside double quotes.
  • tokenValue prop is now included in list nodes again.
  • Cursor position is now correct in Safari.
  • Values are no longer detected as numbers if they have multiple decimal separators.

GaugeChart​

  • Now supports auto-scaling.

HistogramChart​

  • Added support for panning controls in the bottom axis.
  • Fixed an issue where the chart plot could not be focused using the keyboard, which prevented shortcuts from working.

KeyboardShortcut​

  • Added mappings for the minus, multiply and divide aliases that can be used as the keyboard shortcuts binding.
  • Height of menu content is now adjusted to the available space.
  • Menu items are styled correctly on focus and hover.

MessageContainer​

  • Added MessageContainer component.

PieChart​

  • Improved Pie and Donut charts labels.

SegmentSelector​

  • SegmentSelector allows multiple empty selects.
  • SegmentSelector now works with native forms.
  • The SegmentSelectorProvider only updates the defaultSegments of the provider on mount.

SimpleTableV2​

  • Introduces SimpleTableV2 as a successor to the SimpleTable.

SingleValue​

  • element prop is now added to the exposed ref.

TimeframeSelector​

  • Added tooltip to the TimeframeSelector trigger.
  • Display @d -> +1d@d as Full day and now -> +1d@d as Remaining day.
  • Added timeframe-stepper. This now allows the user to move the timeframe backwards and forwards. CAUTION: This feature is opt-in initially, with the default set to false. In the next breaking change release, it will become an opt-out feature, with the default set to true. Please prepare your integrations accordingly.
  • TimeframeSelector no longer automatically submits an invalid value that is corrected and becomes valid. The value needs to be submitted either via keyboard or clicking the apply button.

TimeseriesChart​

  • Exposed SharedChartInteractions and deprecated SynchronizationProvider in its favor.
  • Fixed an issue where the chart plot could not be focused using the keyboard, which prevented shortcuts from working.

ToggleButtonGroup​

  • Styling no longer breaks when wrapping ToggleButtonItems in a tooltip.

0.117.12​

General​

  • Removed unnecessary moduleNameMappers for date-fns.

0.117.11​

General​

  • Added missing moduleNameMappers for date-fns.

FilterField​

  • tokenValue prop is now included in FilterField list nodes again.

0.117.10​

Dependency updates
  • @dynatrace/strato-components was updated to version 0.85.70.
Deprecations

General

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

Content​

  • Fixed Markdown list item moving to next line in Firefox, when there are two newlines in the content.

AnnotationsChart​

  • Removed group number limit on the markers.

DataTable​

  • Button components are now aligned correctly in custom cell renderers.
  • Only the first 1000 characters of a log-content string will be highlighted to enhance the table's performance.
  • Custom cells now render TerminologyOverlay items correctly.

DataTableV2​

  • null is no longer treated as a valid date in columnType: 'date' columns.
  • Header heights are now calculated correctly when the incoming data changes at runtime.
  • Resizable tables now initially calculate their width correctly when not in fullWidth mode.
  • The color of the SubRow expander button in the header now aligns with the font-color of the header cells.
  • Column resizing performance has been improved.
  • Log content cells now use monospace font.
  • Font style can now be controlled on a column level.
  • alignment in column definition for log-content columns now behaves correctly in syntax-highlighted cells.
  • Row actions now fit properly into condensed rows.

DQLEditor​

  • Autocompletion suggestions now remain open when numbers are typed.
  • Tooltip is now displayed properly inside an Accordion in a Page.

FilterField​

  • a11y props are now cleaned up and aria labeling is fixed.

GaugeChart​

  • Now supports label formatting.
  • Now supports shared configurations.

HoneycombChart​

  • Applying custom formatting for custom color palettes.

InformationOverlay​

  • The aria-label on the InformationOverlay.Trigger now only defaults when no trigger text is provided.
  • Menu item tooltip now remains open when hovered, providing convenient access to interactive content.

MeterBarChart​

  • Does not support wrapper for Threshold slots.

Page​

  • Fixed visual glitch in the initial animation of the Page and fixed disabling animations in the Drawer.

SegmentSelector​

  • Added tooltip for the SegmentSelector button.

TimeseriesChart​

  • Removed synchronized pinned state for synchronized cross-hairs.

0.117.3​

General​

  • Removed unnecessary moduleNameMappers for date-fns.

0.117.2​

General​

  • Added missing moduleNameMappers for date-fns.

FilterField​

  • Rounded brackets are now included in the node value when inside double quotes.
  • tokenValue prop is now included in FilterField list nodes again.

0.117.1​

General​

  • Fixed migration path in package.json dt entry.

0.117.0​

Breaking changes

Buttons

  • The following components and props have been removed from @dynatrace/strato-components-preview/buttons and moved to @dynatrace/strato-components/buttons:

  • Button

  • ButtonLabelProps

  • ButtonOwnProps

  • ButtonPrefixProps

  • ButtonProps

  • ButtonSuffixProps

  • IntentButton

  • IntentButtonProps

  • IntentButtonPropsBase

  • IntentButtonRecommendAppProps

Additionally, the following have been removed:

  • _AriaBaseButtonProps
  • _useButton
  • AriaButtonProps
  • ButtonAria
  • colorOptions
  • ColorOptionsType
  • variantOptions
  • VariantOptionsType

A migration has been provided for the Button component. The IntentButton no longer has a default label. If you want to display “Open with” you will need to pass it as a child element. Additionally, the iconOnly prop has been removed.

Charts

  • Removed resizable property from Legend props.

Conversion-Utilities

  • Removed deprecated cellRenderer and associated types.

Core

  • ConvertCSSPropertiesToStyled has been removed.

  • The following components and props have been removed from @dynatrace/strato-components-preview/layouts and moved to @dynatrace/strato-components:

  • AriaDisabledProps

  • AriaLabelingProps

  • DataTestId

  • DOMProps

  • FlexItemStyleProps

  • FlexStyleProps

  • GapProps

  • GridFlexPositionProps

  • GridItemStyleProps

  • GridStyleProps

  • LayoutSizeProps

  • PolymorphOwnProps

  • PolymorphProps

  • PolymorphicComponentProps

  • ProgressBar

  • ProgressBarDensity

  • ProgressBarIconProps

  • ProgressBarLabelProps

  • ProgressBarProps

  • ProgressBarValueProps

  • ProgressCircle

  • ProgressCircleProps

  • ProgressCircleSizeOptionsType

  • roleVariants

  • RoleVariantType

  • SpacingProps

  • StylingProps

  • useBreakpoint

  • useCurrentTheme

  • WithChildren.

Additionally, the gapSizes property has been renamed to spacingProperties, and GapSize has been renamed to SpacingProperties. Both have been moved to @dynatrace/strato-components/styles.

The following have been removed:

  • DefaultSpacingProps
  • FocusContextProps
  • FocusProvider
  • FocusScope
  • FocusScopeProps
  • FocusableElement
  • getFirstFocusableChild
  • getLastFocusableChild
  • isBrowser
  • isFocusable
  • Modality
  • mulberry32
  • _attemptFocus
  • _focusFirstDescendant
  • _mergeProps
  • _NullToObject
  • _TupleTypes
  • _UnionToIntersection
  • _useAriaLabelingProps
  • _useFocusContext
  • useId
  • useIdProps
  • useSafeForwardProps
  • UseSafeForwardReturnProps
  • uuidv4

A migration is provided.

Layouts-Core

  • The following components and props have been removed from @dynatrace/strato-components-preview/layouts-core and moved to @dynatrace/strato-components/layouts:

    • Container
    • ContainerOwnProps
    • ContainerProps
    • Flex
    • FlexOwnProps
    • FlexProps
    • Grid
    • GridOwnProps
    • GridProps
    • LayoutProps
    • LayoutSizeCSS
    • PaddingDetailOptionsType
    • PaddingShortHandSyntax
    • PaddingSimpleOptionsType
    • paddingOptions
    • spacingSizeOrder
    • Surface
    • SurfaceOwnProps
    • SurfaceProps

    The following have been moved to @dynatrace/strato-components/content:

    • Skeleton
    • SkeletonProps
    • SkeletonText
    • SkeletonTextProps

    Additionally, the PaddingProps and MarginProps properties have been renamed to SpacingProps. The SpacingSize property is now SpacingProperties, and spacingSizes has been renamed to spacingProperties. Those have been moved to @dynatrace/strato-components/styles.

    A migration is provided.

Styles

  • The following components and props have been removed from @dynatrace/strato-components-preview/styles and moved to @dynatrace/strato-components/styles:

    • FlexItemStyleProps
    • FlexStyleProps
    • GapProps
    • GridFlexPositionProps
    • GridItemStyleProps
    • GridStyleProps
    • LayoutSizeProps
    • SpacingProps

    Additionally, DefaultSpacingProps has been removed. A migration is provided.

AppName

  • AppName is now removed. Please use the getAppName from '@dynatrace-sdk/app-environment' or the AppHeader instead.

Checkbox

  • Removed CheckboxBaseProps, CheckboxControlledProps, and CheckboxUncontrolledProps in favor of CheckboxProps.

DateTimePicker

  • The value of the DateTimePicker now also accepts a TimeValue.
  • The value returned in the onChange callback is now TimeValue | null.
  • Removed DateTimePickerControlledProps, DateTimePickerUncontrolledProps, DateTimePickerBaseProps, and the deprecated readonly prop.

Divider

  • Removed deprecated Divider, it's now available in @dynatrace/strato-components.

FilterField

  • The FilterFieldListNode now includes FilterField tree nodes in the value array instead of just strings.
  • Removed deprecated FilterFieldNodeRange type.
  • Removed FilterFieldRangeNode type.
  • Removed FilterFieldLikeOperatorNode type.

NumberInput

  • Removed NumberInputControlledProps, NumberInputUncontrolledProps, and NumberInputLimitProps.

PasswordInput

  • Removed PasswordInputControlledProps, and PasswordInputUncontrolledProps in favor of PasswordInputProps.

RadioGroup

  • Removed RadioGroupBaseProps, RadioGroupControlledProps, and RadioGroupUncontrolledProps in favor for RadioGroupProps.

Section

  • Removed deprecated Section and associated types.

Select

  • Removed SelectValueControlledProps, and SelectValueUncontrolledProps in favor of SelectProps.

Switch

  • Removed SwitchBaseProps, SwitchControlledProps, and SwitchUncontrolledProps in favor of SwitchProps.

Text

  • Removed deprecated Text, it's now available in @dynatrace/strato-components.

TextArea

  • Removed TextAreaBaseProps, TextAreaControlledProps, and TextAreaUncontrolledProps in favor of TextAreaProps.
Deprecations

TextInput

  • Deprecated unused helper props of the TextInput. They can be replaced by picking from the TextInputProps directly.

TimeframeSelector

  • Helper props of the TimeframeSelector are now deprecated and can be picked from the TimeframeSelectorProps instead.
Dependency updates
  • @dynatrace/strato-components was updated to 0.85.60.
  • @dynatrace/strato-icons was updated to 0.39.3.
  • @dynatrace-sdk/units peer dependency range was updated to >= 0.18.3 < 1.
  • @dynatrace-sdk/react-hooks peer dependency range was updated to >= 0.6.0 < 1.
  • @dynatrace-sdk/client-notification peer dependency range was updated to ^1.7.0.

Charts​

  • SeriesActions now support links.
  • Hide overlays (Tooltip, Toolbar, Crosshair...) when hovering charts.
  • Fixed race condition in Annotations, which will make icons disappear in some cases when they changed their reference in memory.

AnnotationsChart​

  • Fixed collapsing x-axis when tracks have no markers.

DataTable​

  • Line wrapping should now function correctly with the custom-rendered default cell.

DataTableV2​

  • Removed unwanted padding in custom-rendered cells with cell actions.
  • Now ensures proper sorting with NaN and null values.
  • Text ellipsis is now correctly applied to table cells when the content exceeds the cell’s width capacity.
  • The loading indicator is now correctly positioned when row actions are configured and no columns defined or resizable columns are enabled.

DateTimePicker​

  • Now also supports expressions.

FilterField​

  • No longer inserts unnecessary opening bracket when selecting the in operator from the suggestions overlay and brackets are already inserted.
  • Composition characters, like backtick or tilde can now be entered in the FilterField on Mac.
  • Suggestions are now applied for keys with double quotes. A space is added after values in double quotes.
  • The onFilter callback is now updated if the callback changes.

Forms​

  • Removed internal _parseTime function.

HistogramChart​

  • Add support for infiniteZoom.
  • Improve chart FPS by 175% when hovering, achieving a significantly smoother interaction with big datasets.

HoneycombChart​

  • Integrated new range legend.

Map​

  • Integrated new range legend.

SegmentSelector​

  • Now fails gracefully, when selecting a recently removed segment.

SingleValue​

  • Integrated Sparkline bar variant.

Sparkline​

  • Added context value indicators.

TimeframeSelector​

  • Added support for @y @q @w @h @m @s in roundDownExpressions.

Timeseries​

  • Added panning indicators to the bottom axis area.
  • Integrating relative value representation for band variant.
  • Fixed crash in Annotations when hovering over tracks in Firefox.
  • Improved chart FPS by 200%, when hovering, achieving a significantly smoother interaction with big datasets.

XYChart​

  • Added a configurable top x-axis.
  • Integrate new design of the range legend.

0.116.73​

TimeframeSelector​

  • Removed wrong presets.

0.116.72​

DataTable​

  • Removed unwanted padding in custom-rendered cells with cell actions.

  • Only the first 1000 characters of a log-content string will be highlighted to enhance the table's performance.

0.116.71​

SegmentSelector​

  • SegmentSelector will now fail gracefully when selecting a freshly removed segment.

0.116.70​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.50.
Deprecations

Forms

  • The getSimplifiedExtendedISOStringFromValue function from the forms subpackage is now deprecated.

DataTableV2

  • The pageSize and pageIndex config props are now deprecated in favor of defaultPageSize and defaultPageIndex to match the Pagination component's behavior in the uncontrolled state.

Charts​

  • Added support for difference in milliseconds in time frames in Tooltip.
  • Fixed undefined error on Annotations handlers.

Conversion-Utilities​

  • Use Uid fields as timeseries name in convertQueryResultToTimeseries.

AnnotationsChart​

  • Fixed scroll overflow on the x axis.

CategoricalBarChart​

  • Sort tooltip items to keep visual consistency.

DataTable​

  • Adjusted the Sparkline column cell to match the height of all other cells in the table by removing its fixed height of 50px.

DataTableV2​

  • Now if column alignment is specified in the column definition, it should also apply to custom rendered cells.
  • Setting the pageSize and pageIndex values for pagination using an imported config now sets them as the default pageSize and pageIndex.
  • When the user collapses all subrows and the current page displays no rows, the table will navigate to the first previous non-empty page. Additionally, we have fixed issues ensuring that the subrows line connectors are properly redrawn when sorting is applied.
  • MeterBarChart now supports the data-max option for scaling.

DateTimePicker​

  • Fixed issue where selecting a date before the year 1000 caused a crash.

DQLEditor​

  • Nested function calls with strings and index access now have correct syntax highlighting.

FilterField​

  • Now correctly detects escaped escape characters inside strings.

HealthIndicator​

  • Added HealthIndicator component.

HistogramChart​

  • Sort tooltip items to keep visual consistency.
  • Support zoom interactions (onZoomChange, initialZoom, currentZoom) via props.
  • Improved the performance of hovering over the chart.

Honeycomb​

  • Fixes an issue when having the legend at the bottom and no enough space to draw honeycomb circles.

SelectV2​

  • Removed erroneous error outline of the search input.

Sparkline​

  • Added support for log scale in the bar variant.

PasswordInput​

  • No longer shows two reveal buttons on Microsoft Edge.
  • Suffix and Prefix automatically add text ellipsis to text-only children.

TextInput​

  • Suffix and Prefix automatically add text ellipsis to text-only children.

TimeseriesChart​

  • Improved the performance of hovering over the chart.
  • Implement synchronized pin in SynchronizationProvider.
  • Zoom and pan gestures are now supported for touch devices.

0.116.60​

Deprecations

Common Annotations

  • Deprecated the priority prop from Track slot.

AnnotationsChart

  • Deprecated the data prop from Marker slot.

TimeseriesChart Annotations

  • Deprecated the data prop from Marker slot.

HistogramChart Annotations

  • Deprecated the value prop from Marker slot.

Accordion​

  • Now adjusts the width of the section label, so it does not overflow the parent container.

AnnotationsChart​

  • Support title, description, and symbol at root Marker level.
  • Added textOverflow and tooltip props to AnnotationsChart configuration.

BaseCodeEditor​

  • The tooltip completionInfo now has a minimum width to avoid it positioning in a narrow spot.

Calendar​

  • Now keeps the original hour when initializing it with a specific time and switching to a date with a different Daylight Savings Time offset.

Charts​

  • Fixed issue that caused the tooltip to display an unnecessary scrollbar in TimeseriesChart.

DataTable​

  • Log-content cells no longer line break when line wrap is disabled.

DataTableV2​

  • You can now import and export a configuration.
  • Selection chip is now aligned with the selection checkboxes.
  • Multi-sorting functionality is now available for both controlled and uncontrolled sorting states.
  • Column remeasuring, based on font loading, now waits for animations to finish.
  • The sub-row trigger now works with custom cell renderer.
  • Download option in the toolbar no longer shows the selected download option when row selection is disabled.
  • Now displays the full header title without ellipsis in Windows when the column width is set to ‘content’.
  • Log-content cells no longer line break when line wrap is disabled.

DateTimePicker​

  • Now navigates to the correct date in timezones with a large offset (e.g. Japan +9h).

DQLEditor​

  • Some instances of double quote autocomplete suggestions are no longer filtered out.

FilterField​

  • Statement key with double quotation marks has the type Key.
  • Now correctly inserts the suggestion when selecting a suggestion while the cursor is in the front of the value.

Forms​

  • FormFieldMessages are now rendered when used outside of the FormFieldMessages component.
  • Enable error connection of multiple inputs within one error messages context.

HistogramChart Annotations​

  • Support start and end at root Marker level.

NotifyButton​

  • Now handles notifications that were already created or deleted and resets its state.

Page​

  • The page panels have the same height behavior on all screen sizes.

SegmentSelector​

  • Added an apply button within the SegmentSelector Overlay for a clearer UX.

SelectV2​

  • Now supports the new validation concept and FormFieldMessages.

Sparkline​

  • Added support for the bar variant.

Tab​

  • No longer passes keepMounted to the underlying DOM element.

Tables​

  • For CSV download, dates are now also serialized when a function accessor is used.

TerminologyOverlay, InformationOverlay​

  • The trigger now has the right background color in light and dark mode.

TimeseriesChart Annotations​

  • Support start, end, title and description at root Marker level.
  • Exposed the visibleTracksLimit prop.

0.116.53​

DataTable​

  • Fixed line wrapping a log-content column in DataTable.

0.116.52​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.41.

General​

  • CSS fallbacks now have actual values to avoid invalid built styles.

0.116.51​

FilterField​

  • The applied suggestions are not escaped again when there are already quotes in the FilterField.

Tabs​

  • Style injection on the tabs has been fixed.

Timeseries​

  • Reset button is now disabled if the initial and the current domain are equal.

SelectV2​

  • The overlay no longer breaks overflow in Chrome 129.

0.116.50​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.40.
  • @dynatrace-sdk/client-filter-segment-management was updated to ^1.0.0.
Deprecations

DataTableV2

  • TableActionMenu is now renamed to TableActionsMenu. TableActionMenu is now deprecated in favor of TableActionsMenu.

Charts​

  • Added the width prop to the HistogramChart.
  • Added the width prop to the TimeseriesChart.
  • The series unmatching colors are now consistent in all charts.
  • Fixed Timeseries issue, where the formatter wasn't applied correctly when only the right axis was configured.
  • Fixed the Timeseries right magnifier placements so they don’t overlap with the right threshold.
  • Fixed issue that caused the mouse wheel action to scroll the browser page once the zoom limit was reached on the Timeseries and the Histogram charts.

conversion-utilities​

  • An initial conversion function for DQL result RangeFieldTypes[] to DataTableV2ColumnDef[] is now available.

Forms​

  • parseTime() supports valid iso 8601 strings without hours, minutes, seconds or milliseconds.

  • TimeframeSelector and TextInput now provide a validate function on ref.

Accordion​

  • Fixes the accordion content behavior when working with multiple accordions on the same page, ensuring that content layers are displayed in the correct order.

Annotations​

  • Hide marker icon when there's not enough space to show it as content.
  • Add labelWidth prop for marker labels.
  • Fix disappearing annotation markers symbol on re-render.

Chip​

  • Displays number 0 when used as child.

DataTable​

  • Minor improvement in custom download for avoiding [object Object].

DataTableV2​

  • Now accepts a rowId function to better identify individual data rows.
  • Now displays a tooltip on overflowing headers.
  • formatLogContent is now exposed on the custom cell renderer function.
  • Actions row no longer receives a header name to align with design.
  • Header cells now include their respective column IDs through the data-column-id attribute.
  • Header styling is now improved (custom headers, sorting, nested headers, column actions).
  • Column widths for content width columns are now remeasured correctly when toggling visibility.

DQLEditor​

  • DQLEditor now shows suggestions when deleting while cursor is either at the end of the text or before a space character.

EmptyState​

  • The Details slot now renders a div element if the children provided are not a string, else it renders a p element.

FilterField​

  • FilterField does not crash when starting a key with double quotes.
  • Validity and error state are now updated when programmatically changing the value.

Histogram​

  • Histogram with relative values now shows both absolute and relative values in the tooltip.

Honeycomb​

  • When a minimum value is specified, now it is included instead of excluded.
  • Introduced an improvement to not show repeated numbers for the ranges in the legend of the honeycomb.
  • Now supports truncation mode to apply an ellipsis to long texts.
  • Fixed honeycomb filter util index out of bounds issue.

InformationOverlay​

  • Styles within InformationOverlay.Trigger are no longer overridden.
  • Menu.SubContent height is now limited to viewport height.
  • JSX passed as title is no longer automatically wrapped in a heading.
Note

If you have passed JSX to the title, it now will no longer receive heading styles. Use a Heading component to reapply the styles.

SegmentSelector​

  • Now shows applied private segments if no public segments are available, instead of the EmptyState.
  • Now supports trigger customization.

Tabs​

  • onChange is no longer called twice if selectedIndex was changed in the callback.
  • The first Tab is now selected by default if neither selectedIndex nor defaultIndex was provided.
  • Clicking disabled Tabs no longer selects them.

TimeseriesChart​

  • Added infiniteZoom, currentZoom, initialZoom to timeseries import config.
  • Relative value representation on line variant will be calculated on the max value of the series.
  • Now supports relative value representation on multiple units.
  • Introduced chart crosshair synchronization provider.

0.116.43​

SelectV2​

  • SelectV2 overlay no longer breaks overflow in Chrome 129

0.116.42​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.32.
  • @dynatrace-sdk/client-filter-segment-management was updated to 1.0.0.

SegmentSelector​

  • The SegmentSelector also shows applied private segments if no public segments are available instead of the EmptyState.

0.116.41​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.31.

Tabs​

  • onChange is no longer called twice if selectedIndex was changed in the callback.

0.116.40​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.30.
  • @dynatrace/strato-icons was updated to 0.39.2.
Deprecations

FilterField

  • The FilterFieldNodeRange type is now deprecated and will be removed. Please use FilterFieldNodeBase['range'] instead.
  • The FilterFieldRangeNode and FilterFieldLikeOperatorNode types are now deprecated and will be removed, as they're not supported by the FilterField grammar.
  • The isEscaped and operator props of the FilterFieldStringNode are now deprecated.

Forms

  • Deprecated the _parseTime function in favor of direct usage of parseTimeAsTimeValue from the @dynatrace-sdk/units package.

Charts​

  • HeatmapChart will now attempt to display input data based on the axis types provided.
  • Default formatter for the CategoricalBarChart will now calculate the optimal precision automatically.
  • Fixes issue on the timeseries that caused a line series to be hidden when a band and line series shared the same data.

Calendar​

  • No longer shows duplicate dates when DST changes and correctly applies the initial time.

DataTable​

  • Custom header now receives hover styles when sorting is enabled.

DataTableV2​

  • Grid template is now remeasured once data is loaded initially.
  • Added ability to reset both visibility and column order settings, for both controlled, and uncontrolled modes.
  • Table actions, selected rows actions, and toolbar are now rendered only when they are not empty.
  • Gantt chart data-min and data-max now also considers sub-row values.
  • Column sizing now works with fraction width columns as well.

FilterField​

  • Shift+Enter no longer inserts a new line in the FilterField.

FormField​

  • Disabled form controls do not show errors and do not prevent form submission.

HistogramChart​

  • Add relative value data representation.

HoneycombChart​

  • Improved performance when hovering and showing the tooltip.
  • Now allows to configure max and min limits for numerical values.
  • Adding all the values to the legend for custom coloring.

Legend​

  • Show chart legend in descending data order.

SegmentSelector​

  • Trigger exits loading state properly for compact variant, passes down aria props, and displays segment and variable if only one of each is chosen.
  • Increase style specificity to ensure proper styling.

Timeframe​

-formatTimeframeToParts now includes an optional parameter to prevent clamping future to dates to Now.

TimeframeSelector​

  • Fixed console warning displayed in non development mode.

TimeseriesChart​

  • Fixed issue that applied the formatter to the output values when the valueRepresentation was set to relative.

Toast​

  • Toast text wrapping no longer breaks due to css bundling orders.

UseBreakpoint​

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

0.116.30​

Charts​

  • TimeseriesChart supports infinite zoom feature.
  • Removed value from the exposed data on legend series actions on the Categorical Bar chart.
  • Heatmap data allows null values.
  • RangeLegend handles -Infinity to Infinity ranges correctly.

Filters​

  • Filter field tree conversion no longer has side-effects influencing e.g. tests running in parallel.
  • The converted value of strings now no longer includes escape characters.

Content​

  • EmptyState.Title now allows to set a heading tag name specifically to ensure proper document outlines.

Forms​

  • Focus does not jump to the first option after selecting when using a controlled multi select in SelectV2.
  • Tabs are now correctly controlled via the selectedIndex prop.

DataTable​

  • DataTable no longer hides the sorting indicator for columns with custom headers.
  • Loading state with no visible columns no longer crashes the DataTable.

DataTableV2​

  • The RowActions API has been opened up to no longer enforce the use of an auto collapsing action group.
  • Columns of type text now automatically detect links and render them using ExternalLink components. This can be disabled in the column definition config by setting the detectLinks option to false.
  • DataTableV2.Pagination now allows opting out of default pageIndex reset on data change.
  • Built in column actions are no longer duplicated when an action is triggered.

0.116.24​

SelectV2​

  • SelectV2 overlay no longer breaks overflow in Chrome 129.

0.116.23​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.21.
  • Documentation update

0.116.22​

Calendar​

  • Calendar no longer shows duplicate dates when DST changes and correctly applies the initial time.

SegmentSelector​

  • Trigger exits loading state properly for compact variant, passes down aria props, and displays segment and variable if only one of each is chosen.
  • Increase style specificity to ensure proper styling.

0.116.21​

Dependency updates
  • @dynatrace-sdk/units peer dependency range was expanded to >= 0.13.2 < 1
  • @dynatrace-sdk/react-hooks peer dependency range was expanded to >= 0.4.3 < 1
  • @dynatrace-sdk/client-filter-segment-management peer dependency range was expanded to >= 0.1.0 < 1

0.116.20​

Important
  • The storage:filter-segments:read scope must now be added to your app configuration.
  • The SegmentSelector automatically queries for all variables configured per segment. Therefore, when using the SegmentSelector the read storage - scopes for all possible dql queries should be included in the app configuration to not limit the configured segments and variables.
Dependency updates
  • @dynatrace/strato-components was updated to 0.85.20.
Deprecations

AppName

  • AppName got deprecated. The AppHeader component from the layouts package should be used instead.

Charts​

  • Fixed issue in the HistogramChart where the series actions were not returning any bin data if the tooltip was of the single variant.
  • Exposed selected category in the CategoricalBarChart's seriesActions prop.
  • Added zoom interaction props to TimeseriesChart.

Tables​

  • For the MeterbarChart column type, we compute the total value for each row. The highest total value across all rows is designated as the maximum configuration value for each row. This feature has been implemented in both DataTable and DataTableV2.
  • AppLink, rendered as a menu item link inside the Menu component, can now properly handle the onClick event and navigate to the app.

Calendar​

  • Calendar's header reflects the actual month when selecting the first of the month.

CategoricalBarChart​

  • Fixed issue that applied the formatter to the output values when the valueRepresentation was set to relative.
  • If valueRepresentation is set to relative, it now reacts to filtering of dimensions/categories and to negative values.
  • Fixed cropped labels in bottom axis for some cases (unique categories).

DataTableV2​

  • The subrows feature now allows for a disableSubRow function to be passed to prevent individual subrows from expanding.
  • Removed the default padding in the header cell, if header has a custom renderer.
  • Measurements related to subrows and nested headers are now improved.
  • Now Virtualization works in a flex-container without blowing out.
  • Interactive row highlighting no longer overlaps sticky headers.
  • Gantt chart UX and tooltip have been improved.
  • Column ordering via column actions now works correctly with builtin columns.
  • Now shows a "No columns visible" message when all user defined columns are hidden. Any built-in columns are hidden now automatically when all user defined columns are hidden.
  • RowVirtualizer now remeasures whenever lineWrap or rowDensity changes.

InformationOverlay​

  • TextEllipsis now works correctly within an InformationOverlay.

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.

SegmentSelector​

  • Introduces an experimental SegmentSelector with basic functionality.

SingleValue​

  • Add support for Sparkline curve settings in SingleValue.

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.

Timeseries​

  • When a Timeseries chart uses a relative value with only one series, now it takes the highest value of the series to calculate the relative value of each datapoint.
  • Fixed tooltip so that the absolute value displays the correct unit.
  • When TimeseriesArea chart has only one visible series, it shows relative values based on the maximum value.

0.116.14​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.11.

0.116.13​

Calendar​

  • Calendar header reflects the actual month when selecting the first of the month.
  • Calendar no longer shows duplicate dates when DST changes and correctly applies the initial time.

0.116.12​

General​

  • @dynatrace-sdk/client-notification is no longer a production dependency.

0.116.11​

CategoricalBarChart​

  • Fix cropped labels in bottom axis for some cases (unique categories).

0.116.10​

Dependency updates
  • @dynatrace/strato-components was updated to 0.85.10.
  • @dynatrace/strato-icons was updated to 0.39.1.
  • @dynatrace/strato-design-tokens was updated to 0.20.40.

Charts​

  • Added XYChart and Heatmap charts.
  • Downloaded CSV data is now sanitized to prevent injection and parses dates to ISO8601 to preserve consistency.
  • RangeLegend of Honeycomb doesn't reverse its items when re-rendering.

Editors​

  • Added required as a prop which sets aria-required to true in the CodeEditor and DQLEditor.
  • onChange is now called when content is deleted via ctrl+a followed by del.
  • value prop change now correctly updates content regardless of cursor position.
  • onChange is now called on undo or redo.

AnnotationsChart​

  • Remove symbol content when range marker is too short and textOverflow is truncate.

Button​

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

Calendar​

  • Fixes the today indicator when using a user setting timezone like UTC+/-offset.

DataTable​

  • Ensure column order considers prefix and suffix columns.

DataTableV2​

  • Added DataTableV2.
  • Introducing columnType markdown that can display content formatted in markdown-style.
  • Added syntax highlighting for log-content.

FilterField​

  • Now supports undo and redo.
  • onChange is now called on undo or redo.
  • Selection is now set correctly when programmatically changing the value.
  • Now shows suggestions when typing in as an operator, and moves the cursor to the right when applying a suggestion.
  • Added virtualization and max-height to FilterField suggestions.
  • Virtual focus is now reset correctly when closing the suggestions overlay.
  • Inclusion list now contains whole FilterField leaf nodes in addition to the string values.

Histogram​

  • Now supports programmatic zooming.

Honeycomb​

  • A bug preventing the correct color from being displayed for categories with capital letters was resolved.
  • The legend now does not crash when applying ColorRanges with some range with from=to.

NotifyButton​

  • Added NotifyButton.

SelectV2​

  • Now aria-controls are correctly mapped.
  • Overflow ellipsis now applies correctly in multi select mode.

SingleValue​

  • Fix issue with fractions and percentages in Firefox.
  • Remove trend arrow when no value and label exists.

TimeframeSelector​

  • Fixed an issue where the user-settings' timezone was not considered when entering time in a certain format.

Timeseries​

  • Fixed issue that caused the axis ticks to not use the correct time zone.
  • The List's tokenValue prop now contains the whole leaf node of each value provided in the list.

Tooltip​

  • Now uses new animation.

TreeMap​

  • Apply ellipsis to node labels.
  • Now supports the cluster aggregation.

0.116.3​

Calendar​

  • Calendar Header reflects the actual month when selecting the first of the month.
  • Calendar no longer shows duplicate dates when DST changes and correctly applies the initial time.
  • Fixes the today indicator when using a user setting timezone like UTC+/-offset.

TimeseriesChart​

  • Fixed issue that caused the axis ticks to not use the correct time zone.

0.116.2​

CategoricalBarChart​

  • Fix cropped labels in bottom axis for some cases (unique categories).

0.116.1​

Annotations​

  • Fixed Annotations breaking when Track has no Markers.

Filters​

  • Filter field list now includes all types of values again.

0.116.0​

Breaking changes

General

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

Core

  • Removed deprecated TimeFrame type.

Forms-core

  • Deprecated internal _TIMEFRAME_EXPRESSION_COMPATIBILITY regex and _migrateDeprecatedExpression function are removed.

Layouts-core

  • Deprecated Columns and Column component are removed.

Button

  • Deprecated types TextAlignOptionsType, ButtonWidthOptionsType, ButtonSizeOptionsType, behaviorTypeOptions and ButtonBehaviorType are removed.

Chip

  • Deprecated ColorType, SizeType, VariantType and WidthType Chip props are removed. Deprecated visible and hidden numbers in the ChipGroupContext are removed. Use visibleKeys and hiddenKeys instead. Removed deprecated maxWidth on the BaseChip in favor of style override.

Container

  • Removed deprecated ContainerVariantOptions and ContainerColorOptions types.

DateTimePicker

  • Removed deprecated imperative handle functions show/hide. Use open/close instead.

FilterField

  • All occurrences of logical operators in the filter field syntax tree are now upper case.
  • The string to tree conversion util now also returns the isValid flag in addition to the tree. The return type of the util changes from just the tree to { tree: FilterFieldTree, isValid: boolean }. Either destructure the result or access with dot notation.

Hint

  • Removed deprecated hasError prop. To add an error to a form control, please use a FormFieldMessage.Item inside a FormFieldMessage component.

Treemap

  • Removed deprecated property minNodeSize.
Dependency updates
  • @dynatrace/strato-components was updated to 0.85.0.
  • @dynatrace/strato-icons was updated to 0.39.0.

General​

  • Added @testing-library/react 15 support.

Charts​

  • Fixed bottom axis labels that were vertically cropped in some edge cases.
  • Category warn as alias of warning was added to log-status and log-level color palettes.

Annotations​

  • Fixed marker content to be properly centered when markers are cropped.
  • Add x axis label for annotations chart.
  • Some minor visual issues were solved in Annotations.

ConversionUtilities​

  • Improved conversion performance by optimizing the type lookups.

CellRenderers​

  • Deprecated CellRendererOptions and CellRendererTextTruncationOptions which are only used in connection with the already-deprecated cellRenderer.

Editors​

  • onChange is now correctly called when text is changed to match the value prop.

Formatters​

  • The formatTimeframe function is deprecated as the formatting is different from the new TimeFrameV2 type and will be removed.

AnnotationsChart​

  • Implement config import and export.

BaseInput​

  • Inputs with type="search" no longer render browser default clear (x) button.

CodeEditor​

  • Autocompletion suggestions with a suffix now have the correct dimensions.

DataTable​

  • Introduced columnType markdown that can display content formatted in markdown-style.
  • Row actions now receive correct TableRow data after any table column sort.
  • Table now correctly applies minimum height to its body when row density is set to condensed.
  • Fixes column settings interfering with column order.
  • Pagination now works with data that contains circular references.
  • When table data is downloaded now all values will be exported as raw data except the date values that will be formatted in ISO 8601 format.
  • DataTable now supports syntax highlighting for log-content.

DateTimePicker​

  • Fixes DateTimePicker breaking on multiple lines on overflow.

FilterField​

  • FilterField now supports the props disabled, aria-disabled and read-only.
  • SuggestionTips now contains a link to the FilterField syntax documentation.
  • Applying a suggestion with the cursor inside a list now no longer replaces the list's brackets. The applied suggestion is only added to the list.
  • The in and not in suggestions include more details on the operators. When applying them brackets are added.
  • Clear statement button type is now set to 'button' to prevent form submission.
  • The FilterField now uses the same grammar for basic and complex mode and only shows errors in the basic mode for unsupported tokens.

Honeycomb​

  • The hive of the honeycomb is able to fill vertical space.

Markdown​

  • Rendering content of the Markdown component can now be customized with the customComponentMappings property.
  • Modal and Sheet now allow components within their title as well.

SelectV2​

  • Overlay is closed when selecting an already selected option in single selection mode.

Timeseries​

  • The userData deprecated prop has been removed from TimeseriesBand. Extend the TimeseriesBand type to add custom data.
  • Fixed timeseries chart breaking when filtering from chart interactions.

TimeseriesChart​

  • Introduced programmatic enablement for the explore zoom mode (timeseries only).

Toast​

  • Tooltips now apply the correct zIndex within a Toast.

0.115.27​

SelectV2​

  • SelectV2 overlay no longer breaks overflow in Chrome 129.

0.115.26​

Calendar​

  • Calendar Header reflects the actual month when selecting the first of the month.
  • Calendar no longer shows duplicate dates when DST changes and correctly applies the initial time.
  • Fixes the today indicator when using a user setting timezone like UTC+/-offset.

TimeseriesChart​

  • Fixed issue that caused the axis ticks to not use the correct time zone.

0.115.25​

FilterField​

  • Filter field list now includes all types of values again.

0.115.24​

Charts​

  • Fixed React 17 apps breaking because of a React 18 dependency.

0.115.23​

Breaking changes

FilterField

  • All occurrences of logical operators in the filter field syntax tree are now upper case.

Editors​

  • onChange is now correctly called when text is changed to match the value prop.

FilterField​

  • Applying a suggestion with the cursor inside a list now no longer replaces the list's brackets. The applied suggestion is only added to the list.
  • The FilterField now uses the same grammar for basic and complex mode and only shows errors in the basic mode for unsupported tokens.

TimeseriesChart​

  • Fixed timeseries chart breaking when filtering from chart interactions.

0.115.22​

  • Documentation correction.

0.115.21​

Dependency updates
  • @dynatrace/strato-components was updated to 0.84.51.

0.115.20​

Deprecations

Container

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

DatePicker

  • DatePicker is deprecated and will be removed in a future release. Please use the DateTimePicker instead.

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.
Dependency updates
  • @dynatrace/strato-components was updated to 0.84.50.
  • @dynatrace/strato-icons was updated to 0.38.0.

Accordion​

  • Accordion always animates the opening of a section.

AnnotationsChart​

  • Exposed new subcomponent to provide custom tooltip template.
  • Fixed marker react icons flickering on hover.

Avatar​

  • Avatar.Label and Avatar.Subtitle can text break when overflown.

Charts​

  • Set a fixed z-index to Timeseries and Histogram axis magnifiers to prevent other elements from overlapping them.
  • Remove the Bin: prefix for the tooltip in the Histogram.
  • Changed default ratio to automatically set the optimal legend size for the initial rendering (based on the content of the legend).
  • Improved the alignment for all axis-based chart.
  • Fixed markers misplacement when vertical scroll was present in Annotations.
  • Change AnnotationsTooltip position.
  • Annotations supports truncation of long text and also expand to fit a long text.
  • Value markers in Annotation have a new visualisation and they don't overflow from tracks anymore.
  • Fixed max height of the tooltip body.
  • Deprecated resizable prop from Legend API.

ChipGroup​

  • ChipGroup now correctly displays the show more button initially.

DataTable​

  • Sorting a column no longer submits a wrapping form.
  • If formatter settings have been configured in the column definition, they can now be applied in a custom cell renderer.
  • Number comparator now handles NaN values in data correctly.
  • Download now works with escaped accessors.
  • When downloading table data, values starting with =, +, -, @, \t and \r are now escaped with a single quote to mitigate CSV injection.

Editors​

  • Cursor position no longer resets to zero when typing.
  • Markdown prefix now has the correct color in light mode.

FilterField​

  • The FilterField now provides the isValid flag in the onChange callback. When clearing the FilterField with the clear button, onChange is now called prior to onFilter.
  • Provide utility for converting a filter field tree into its string representation.
  • not-contains operator is detected correctly.
  • The filter field syntax tree is now generated correctly for nested groups.
  • Supports in and not in operator.

Microguide​

  • Microguide is now clickable when Menu is open.

Page​

  • The Page.DetailView now provides a keepMounted prop, preventing it's contents from unmounting when dismissing the detail view.

SelectV2​

  • Selecting an option within a group without a label works in controlled mode.

SingleValue​

  • Make label visible for empty SingleValue.

Sparkline​

  • Fixed display of isolated data points when gapPolicy is set to gap.

Tables​

  • Change default page size from 10 to 100 and default page size options from [10, 20, 30, 40, 50] to [10, 20, 50, 100, 250, 500, 1000] for pagination.

Timeframeselector​

  • The TimeframeSelector.DisplayValue and TimeframeSelector.CustomTrigger now also accept a render function as child.
  • TimeframeSelector now shows the right timeframe translations for relative dates.

Timeseries​

  • Update the tooltip items to appear in the same sequence of the series plotted in the chart.

0.115.17​

Charts​

  • Fixed React 17 apps breaking because of a React 18 dependency.

0.115.16​

TimeseriesChart​

  • Fixed timeseries chart breaking when filtering from chart interactions.

0.115.15​

  • Documentation correction.

0.115.14​

Dependency updates
  • @dynatrace/strato-components was updated to 0.84.42.

0.115.13​

Migrations​

  • Fixed FileMode error in migrations.

0.115.12​

Dependency updates
  • @dynatrace/strato-components was updated to 0.84.41.

0.115.11​

  • Documentation correction.

0.115.10​

Deprecations

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.
Dependency updates
  • @dynatrace/strato-components was updated to 0.84.40.
  • @dynatrace/strato-design-tokens was updated to 0.20.30.

AnnotationsChart​

  • Included support for timestamp data (number to date conversion).

Calendar, DateTimeRangePicker, TimeframeSelector​

  • The Calendar now keeps the original time when switching to dates with a different daylight savings time offset.

Charts​

  • Provided new AnnotationsActionsPayload type for custom actions.

DataTable​

  • Column ordering via column action now takes into consideration hidden columns.

DatePicker, DateTimePicker, DateTimeRangePicker, TimeframeSelector​

  • These components now take into account the timezone from the user settings.

DateTimeRangePicker​

  • DateTimeRangePicker no longer crashes when range selection is incomplete and the user clicks outside.

DateTimeRangePicker, TimeframeSelector​

  • DateTimeRangePicker no longer shows a validation error despite the correct date and time format in specific regions and TimeframeSelector no longer crashes.

FilterField​

  • Error state is updated when using the clear filter button.
  • Keyboard navigation for the FilterField suggestions supports Home, End, Page Up and Page Down keys.
  • Suggestions overlay closes when onFilter is triggered.
  • Number that precedes a closing bracket is correctly detected as a number.

HoneycombChart​

  • Exposed shared legend props.

PieChart​

  • Added early error handler.

SelectV2​

  • Content width is not jumping when not using the max-content setting on the SelectV2.Content.
  • Overlay content is not jumping to a different option when scrolling.

TimeframeSelector​

  • Timezone information is now shown in the TimeframeSelector overlay.
  • TimeframeSelector now has responsive support.

TreeMap​

  • Added cluster background color based on the nodes color.
  • Added value option to TreeMap valueAccessor.

0.115.1​

Dependency updates
  • @dynatrace/strato-components was updated to 0.84.31.

TimeframeSelector​

  • Timeframe selector now also supports React17.

0.115.0​

Dependency updates
  • @dynatrace/strato-components was updated to 0.84.30.
  • @dynatrace/strato-design-tokens was updated to 0.20.20.
Breaking changes

Filters

The filter field tree now groups statements that are connected with the same logical operator.

Example input: a = 1 b = 1 OR c = 2

Converted syntax tree: Before:

[
  {
    "type": "Statement",
    "a = 1"
  },
  {
    "type": "Statement",
    "b = 1"
  },
  {
    "type": "LogicalOperator",
    "OR"
  },
  {
    "type": "Statement",
    "c = 2"
  }
]

After:

{
  "type": "Group",
  "range": {
    "from": 0,
    "to": 20
  },
  "logicalOperator": "or",
  "explicit": false,
  "children": [
    {
      "type": "Group",
      "logicalOperator": "and",
      "range": {
        "from": 0,
        "to": 11
      },
      "explicit": false,
      "children": [
        {
          "type": "Statement",
          "a = 1"
        },
        {
          "type": "Statement",
          "b = 1"
        }
      ]
    },
    {
      "type": "LogicalOperator",
      "OR"
    },
    {
      "type": "Statement",
      "c = 2"
    }
  ]
}

Forms

  • All form components use FormControlProps and extends controlled and uncontrolled props. Most controlled and uncontrolled form props are deprecated, and the FormControlProps should be used instead. Checkbox, Radio, Switch and TextArea use the FormControlRef.

AnnotationChart​

  • Prevent from setting negative height in AnnotationCharts.

CategoricalBarChart​

  • Fixed incorrect bottom threshold in the categorical bar chart.

Charts​

  • Added more space between tooltip items in Annotations.
  • Added an improvement to avoid labels getting cropped in the range legend.
  • Fixed issue that happened in some browsers where axis labels overlapped with the axis ticks.
  • Support empty content in Annotations markers.

CodeEditor​

  • CodeEditor no longer crashes when the folding number provided exceeds the text character length.

DataTable​

  • Download now preserves new line and carriage return characters and escapes entries containing them.
  • DataTable now supports column type of log content.
  • Fixes unexpected behavior in auto-width columns by correcting how DataTable sets the last column.

DateTimePicker​

  • DateTimePicker is now taking the whole width of its container.

FilterField​

  • Add string to filter field tree conversion utility function.
  • onFilter is also triggered when deleting the entire filter using the clear button.

General​

  • Added 'data-dtrum-mask' and 'data-dtrum-allow' to all components root node, defining the masking of data in session replay.

HoneycombChart​

  • An issue breaking the honeycomb when setting an invalid colorScheme was solved.

MeterBarChart​

  • Fixed chart border overlapping container border

MultiMeterBarChart​

  • Added a default auto option to the max property in order to calculate the max value based on the segments values.

Page​

  • Page.Main no longer flickers if animations are disabled.

SelectV2​

  • onBlur event only triggers when focus moves outside of the select.

Switch​

  • The Switch is no longer able to be focused while disabled, this behavior can be achieved with aria-disabled, but the interactivity needs to be disabled.

TimeseriesChart​

  • Fixed multiple geometries not working in some specific cases.

0.114.14​

SelectV2​

  • SelectV2 overlay no longer breaks overflow in Chrome 129.

0.114.13​

0.114.12​

Dependency updates
  • @dynatrace/strato-components was updated to 0.84.21.

0.114.11​

  • Documentation correction.

0.114.10​

Dependency updates
  • @dynatrace/strato-components was updated to 0.84.20.

AnnotationsChart​

  • Added support for numerical data.
  • AnnotationsChart now supports a configurable height

Button​

  • The SharedInputPropsContext is not consumed by the Button anymore. Workarounds that were needed so that the Button does not consume the id coming from the FormField can now be removed.

DataTable​

  • Download now also replaces carriage returns with spaces.
  • The table's accessibility is now improved. DataTable.Cell now also accepts AriaLabelingProps.

DatePicker​

  • No longer trap focus within the overlay.

DateTimePicker​

  • No longer trap focus within the overlay.
  • Now updates the aria-invalid property correctly.

DateTimeRangePicker​

  • No longer trap focus within the overlay.

DQLEditor​

  • Fix missing suggestions in some cases (by statement).

FilterField​

  • Duration value works with one space character at the end of the statement.
  • Support basic and complex syntax in the filter field.

Forms​

  • The SharedInputPropsContext is not consumed by form control components anymore. Workarounds that were needed so that the Button does not consume the id coming from the FormField can now be removed.

HistogramChart​

  • Added series color override to the Histogram chart.
  • Fixed magnifiers background color when range zooming.
  • Fixed alignment between the vertical line and the crosshair when range zooming.
  • Fixed the proper selected bin from the HistogramChart from seriesActions prop.

HoneycombChart​

  • Added string support for height prop in HoneycombChart.
  • A bug disallowing honeycomb legend to show custom categorical color palettes was solved.

SelectV2​

  • SelectV2.Filter does not consume the required coming from the FormField.
  • Now updates the aria-invalid property correctly.

TimeframeSelector​

  • TimeframeSelector display value now shows milliseconds when precision is set accordingly.
  • No longer trap focus within the overlay.

TimeseriesChart​

  • Fixed magnifiers background color when range zooming.
  • Fixed alignment between the vertical line and the crosshair when range zooming.
  • Exposed selected data point in the TimeseriesChart seriesActions prop.

Tooltip​

  • data-testId, className, and style is now applied to the Tooltip element instead of the hidden wrapper.

TreeMap​

  • Added a valueAccessor prop.

0.114.3​

:::

Dependency updates
  • @dynatrace/strato-components was updated to 0.84.12.

HoneycombChart​

  • A bug disallowing honeycomb legend to show custom categorical color palettes was solved.

0.114.2​

DateTimeRangePicker​

  • DateTimeRangePicker no longer crashes when opening it.

0.114.1​

  • Documentation correction.

0.114.0​

Breaking changes

General

  • A new peerDependency to @dynatrace/strato-components is now added. You might have to install it manually.

Filters

  • The auto suggestions array of the FilterField no longer uses the SuggestionProps type, but a separate type.
Upgrade notes

The AppRoot component and some connected components, hooks, and types have been moved to the @dynatrace/strato-components package. All symbols are still exported from the @dynatrace/strato-components-preview/core entrypoint. dt-app migration is provided to adjust the import paths.

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

Accordion​

  • Accordion no longer animates during initial render.

AnnotationsChart​

  • Introduced time-based X axis in AnnotationsChart.

Charts​

  • All charts now support setting style or className to apply on their root element.
  • Series actions now support sub menus.

DataTable​

  • DataTable.Pagination now forwards all exposed aria roles properly.
  • Now date type column can be customized by using the formatter property within the column definition and passing FormatDateOptions to it.
  • DataTable can now sort columns with a mix of number and BigInt values.
  • The DataTable.FontStyle and DataTable.LineWrap column actions can now also be used with column groups.
  • DataTable.Pagination now supports style and className props.
  • The loading indicator now remains centered in the table, regardless of scrolling.
  • Resolved issues with printing in Chrome when table columns are resized wider than the table width.

DatePicker​

  • The DatePicker calendar header icons now have the correct width.

FilterField​

  • The FilterField supports different insertion strategies for applying suggestions.
  • Escaped textValues are set correctly for contains and ends-with operator.
  • The FilterField ignores trailing spaces of suggestions if already present in the input.

HoneycombChart​

  • Fixed a Webkit browsers related bug whilst rendering the hexagons of the honeycombs.

Overlays​

  • Keydown events are captured within overlays.

SelectV2​

  • Custom DisplayValue works with the TextEllipsis component and is automatically truncated if it is a string.

Sheet​

  • The Sheet component now stays open when interacting with an overlay on top of them.

TimeframeSelector​

  • The TimeframeSelector now uses the DateTimeRangePicker inside the overlay.
  • The TimeframeSelector calendar header icons now have the correct width.
  • The TimeframeSelector trigger now supports form validation.

TreemapChart​

  • Added support for labels on the clusters.

  • Updated dependencies

    • @dynatrace/strato-design-tokens@0.20.10
    • @dynatrace/strato-components@0.84.11
    • @dynatrace/strato-icons@0.37.0

0.113.11​

  • Internal corrections release.

0.113.10​

Deprecations

Button

  • Deprecated TextAlignOptionsType, ButtonWidthOptionsType, ButtonSizeOptionsType, behaviorTypeOptions, ButtonBehaviorType in favor of inline types.

TreeMap

  • Deprecated minNodeSize prop.
Dependency updates
  • @dynatrace/strato-design-tokens was updated to version 0.20.9.
  • @dynatrace/strato-icons was updated to version 0.36.2.

Button​

  • Deprecated TextAlignOptionsType, ButtonWidthOptionsType, ButtonSizeOptionsType, behaviorTypeOptions, ButtonBehaviorType in favor of inline types.

Charts​

  • Added max width property to the tooltip info content container.
  • Add support for tooltip templates in Annotations.
  • Annotations's markers get their truncation threshold fixed. Also, padding is fixed for markers with values (not ranges).

DataTable​

  • If ratioWidth is enabled, the resize handle is no longer displayed.
  • In the column visibility configuration it's now possible to specify columns as 'always visible'. Use the value 'always-visible'. Furthermore, it's no longer necessary to specify all columnVisibility entries because 'visible' will be used as the default.
  • The table actions slot container should now take full table width when the toolbar is not displayed.
  • Column visibility settings in the toolbar should now work correctly for uncontrolled props.
  • It is now possible to pass custom page size options to the DataTable.Pagination and the passed page size is not sanitized anymore.

List​

  • For list markers (bullet points, numbers), color, font family and font size are now inherited. Font weight remains as not being inherited.

Microguide​

  • The Microguide now provides the additional onStepChange callback, that allows you to react to users navigating between steps.

SelectV2​

  • Overlay styles no longer conflict with Surface styles.
  • Improves focus handling for the SelectV2 component when used with a SelectV2.Filter.

TreeMap​

  • Added node labels display to treemap.
  • Deprecate minNodeSize props from TreeMap.

0.113.2​

Charts​

  • Fixes disappearing chart legends when series items are more than 50.

SelectV2​

  • SelectV2 does not crash when pressing tab and not using it inside a FormField component.

0.113.1​

TimeframeSelector​

  • Improved TimeframeSelector types to enable easy usage. This allows a simple string value for from and to without the need of parsing the time.

0.113.0​

Breaking changes

Charts

  • Removes deprecated userData prop from Timeseries type. Extend the Timeseries type to add custom data.
  • Removes toolbar, collapsed and defaultMode props from ChartInteractionsConfig and ChartInteractionsProps.
  • The PieChart and DonutChart main types do not extend anymore from SVGSVGElement

Core

  • Removes deprecated stopPropagation property from BaseEvent. Use continuePropagation property instead.

Filters

  • Remove deprecated defaultPinnedState from FilterBarItem. Define the pinned state on the FilterBar instead.

Formatters

  • Removes deprecated bytes converter and formatter. Use @dynatrace-sdk/units instead.
  • Removes deprecated date formatter. Use @dynatrace-sdk/units instead.
  • Removes deprecated duration formatter. Use @dynatrace-sdk/units instead.
  • Removes deprecated custom unit formatter. Use @dynatrace-sdk/units instead.
  • Removes deprecated percent formatter. Use @dynatrace-sdk/units instead.
  • Removes deprecated bit converter and formatter. Use @dynatrace-sdk/units instead.
  • Removes deprecated number formatter. Use @dynatrace-sdk/units instead.
  • Removes deprecated rate formatter. Use @dynatrace-sdk/units instead.

Forms

  • Removes deprecated InputRef interface. Use FormControlRef instead.
  • Removes deprecated Select component. Use SelectV2 component instead.
  • Removes deprecated resizable property on the Textarea component. Use the resize property instead.
  • Removes deprecated label property on the FormField component. Render the Label component within the FormField instead.
  • Removes deprecated ariaLabelToggle and placeholder properties from the TimeframeSelector component. Please use the CustomTrigger or the Trigger component to provide an aria-label or a placeholder.
  • The DateTimePicker is now capable of returning a null value when all input fields are cleared.
  • The value and onChange of the TimeFrameSelector component are now using the TimeframeV2 type.
  • The TimeframeSelector now supports uncontrolled and controlled values. The new DQL syntax is used, which means weeks, months, and years are no longer supported. The _migrateDeprecatedExpression utility is therefore included for compatibility reasons (to support the old expression formats), but will be deprecated.

Layouts core

  • Removes deprecated style types FlexContainerCSS, FlexContainerProps, FlexItemCSS, FlexItemProps, FlexStyles, GridContainerCSS, GridContainerProps, GridItemCSS, GridItemProps, GridStyles.

Notifications

  • Remove deprecated useToastNotification hook. Use the static showToast function instead.

Overlays

  • Removes deprecated onClose property from useOverlayWithTrigger. Use the onOpenChange property instead.

Typography

  • The default rendered element of the Text component is now span. Migration is provided.
Deprecations

Charts

  • userData prop in TimeseriesBand interface is now deprecated. Extend TimeseriesBand instead to add custom data.

Content

  • CodeSnippetLanguages type is now deprecated in favor of inline CodeSnippetProps['languages'].
  • maxWidth on the Chip component is now deprecated in favor of allowing the maxWidth to be set with style.
  • ColorType, SizeType, VariantType and WidthType are now deprecated in favor of ChipOwnProps.

Accordion​

  • An interactive prop is now available to control the accordions trigger behavior.
  • A color property is now available on the Accordion and Accordion.Section to control the color of the Accordion.Sections.

Charts​

  • Series actions can now be disabled.
  • Fixes an issue on the TimeseriesChart, where some tooltip values were inconsistent with the data that was visually represented.
  • Fixes an issue that caused the magnifier to change position after unpinning the tooltip.
  • Fixes annotations scrollbar overflowing the legend hide/show icon on TimeseriesChart and HistogramChart.
  • Fixes an issue with the Tooltip position, when exiting the chart from the bottom magnifier.
  • Fixes an issue of the chart tooltip not utilizing the custom formatter when the value representation is set to relative.

Chip​

  • MaxWidth on the chip now applies to the correct element.

DataTable​

  • Loading spinner is now also opaque for tables that are not contained.
  • When sortBy is updated from ascending to unset, onSortChange now accurately reflects it.

Editors​

  • Editor styles are now updated correctly once the size changed.

FilterField​

  • Correctly detect exists operators before logical operators.
  • Adds an onFilter callback to the FilterField and triggers form submission on enter if it is the only input inside a form.
  • Syntax tree statement node includes key, operator, and value props instead of children array.
  • Fixes the suggestion type provided in the suggestions callback.

SelectV2​

  • SelectV2.Content width now allows setting of max-content.

TextInput​

  • Fixes an issue with the aria props used for input browser validation when controlState is used.

TimeframeSelector​

  • TimeframeSelector no longer submits the surrounding form when clicking the Apply button.

0.112.22​

Chip​

  • Chips no longer call onClick twice.

0.112.21​

Charts​

  • Fixes issue that prevented the tooltip from being pinned in the Categorical bar chart.
  • Solved chart/legend overlap issue when sending custom style to the charts.

Chip​

  • Styling no longer breaks for Chip component.

DataTable​

  • Fixes issue with sorting on notebooks/dashboards.

0.112.20​

Behavioral changes

Charts

  • timeseries, categorical, honeycomb, histogram, pie, donut, meter bar and multi meter bar chart no longer apply a default padding to their container. If you want to get the padding back, please apply it via the style or className prop on the root of the chart.

DataTable

  • Padding is no longer applied to custom header render functions by default. If you want to apply the padding, wrap your custom rendered element in the DataTable.Cell component.

Typography

  • The Text component now inherits all styles (font size, font weight, line height, etc.) if no textStyle or fontStyle prop is set. To mitigate unexpected visual changes and keep the default text styles, you can manually set textStyle to base or run the provided migration.
Deprecations
  • Columns component from layouts-core has been deprecated. Instead please use a Grid or Flex component.
Dependency updates
  • @dynatrace/strato-design-tokens was updated to version ^0.20.8.

Accordion​

  • New size prop is now available on the Accordion with default and condensed options.
  • New showDividers prop is now available.

Charts​

  • New "status" color palette is now supported in all charts that support color palettes.
  • Fixed issue in Categorical, Histogram and Timeseries charts that generated a minimum bar shape for values that were 0.
  • Updated styling of bars variant in Timeseries, Histogram and Categorical charts to be consistent.
  • Fixed Annotations markers which did not displayed text in Histogram.
  • Added overflow to magnifiers for the timeseries, categorical and histogram charts.
  • Remove surrounding padding and optimize spacing in timeseries, categorical, honeycomb, histogram, pie, donut, meter bar and multi meter bar.
  • Tooltip item virtualization is now fixed.

Checkbox​

  • Checkbox label design is now aligned with the Label component and takes the containers width.

Core​

  • useContainer hook no longer crashes when borderBoxSize is undefined.

DataTable​

  • An onDownloadData callback now is provided when data has been downloaded. It includes information about which subset was downloaded.
  • Numbers passed to formatted columns can now also be passed as a string.
  • Default padding for a custom header was removed. If the default padding for a custom header cell should be applied, please wrap it in the DataTable.Cell component.
  • Next and Previous buttons for the Pagination are now always shown for server-side pagination.
  • Fixes sorting issue when accessor is different than id.
  • Fixes CSV export for columns with string accessors.
  • Currently displayed, sorted data is now exposed via getCurrentPageData on the DataTable ref.

EmptyState​

  • A new generic EmptyState component is now available intended for empty and error states.

FilterField​

  • A new FilterField component is now available.
  • Now enforces a space before / after a comparison operator.
  • The FilterField.LoadingSuggestions was removed in favor of a wrapping FilterField.Suggestions component. This compound accepts the loading prop which shows the loading indicator formerly exposed by FilterField.LoadingSuggestions.

Forms​

  • The TextArea, DatePicker, TimeframeSelector, Checkbox, Switch, NumberInput, and SelectV2 correctly apply the disabled or required state when wrapped in a FormField.
  • Hint and FormFieldMessages.Item components no longer break existing styling.

HistogramChart​

  • Bin calculation is now supported in the Histogram tooltip header.

HoneycombChart​

  • Shapes in the Honeycomb chart now have rounded corners.
  • Color palette now has lighter color at the bottom when legend is aside in the Honeycomb chart.

MeterbarChart​

  • Removed the whole header from the shared tooltip.

Sheet​

  • The Sheet component correctly closes on outside clicks.

SkeletonText​

  • SkeletonText no longer adds margins if only a single line is rendered.

SparklineChart​

  • Support smooth and linear curve shapes in Sparkline component.

TimeseriesChart​

  • Fixed tooltip disappearing when clicking twice in the same annotations marker.

Typography​

  • Style inheritance is now improved. Only block-level components like Paragraph or Heading explicitly define font family, font size, etc., while inline components like Strong or Link only set the minimum styles necessary and inherit the rest. In addition to the font family, the default font size is now also set on the body.

0.112.11​

DataTable​

  • Fixes sorting issue when accessor is different than id.

0.112.10​

Forms​

  • Hint and FormFieldMessages.Item components do not break existing styling.

0.112.9​

Dependency updates
  • @dynatrace/strato-design-tokens was updated to version ^0.20.7.

0.112.8​

Forms​

  • FormControls no longer interfere with the focus after invalid input.

0.112.7​

Checkbox​

  • Faulty css style has been fixed in the checkbox.

0.112.6​

Deprecations
  • The ariaLabelToggle and the placeholder prop will be removed from the TimeframeSelector. Please use the CustomTrigger or the Trigger component, which has an aria-label and a placeholder prop.
  • useTextTruncation hook and the Text component's maxLines prop are now deprecated.
Dependency updates
  • @dynatrace/strato-icons was updated to version ^0.36.1.

Charts​

  • Exposes className and style props of TimeseriesChart, HistogramChart and CategoricalBarChart.
  • Fixed Annotations not being shown when used inside an animated component.
  • Fixed text ellipsis middle truncation inconsistencies.
  • Added in Histogram and Timeseries charts toolbar, the key shortcuts label to the toolbar button tooltip.

Core​

  • getTextStyle is now deprecated and textStyleCSS is provided as a vanilla-extract alternative.
  • @print stylesheet now properly forces light theme.

Conversion utilities​

  • Deprecated the cellRenderer function.

DataTable​

  • Fixed last column behavior altered by add/delete column operations on DataTable.
  • Fixed issue where occasionally the end of the column autowidth measuring cycle didn't get triggered.
  • DataTable no longer sorts incorrectly if provided with non-existing columns.
  • Added columnVirtualization prop that allows for virtualizing columns.

DQLEditor​

  • Missing size prop has now been added.

FilterField​

  • Adds form support for FilterField.
  • Groups in FilterField are detected and structured correctly.

Honeycomb​

  • Solved issue related to the tooltip visibility when clicking out of the chart.
  • Vertical numerical legend in honeycombs now has the lower value at the bottom.
  • Range legend visualize now the items in desc order.
  • Now honeycomb has a responsive gap between nodes.
  • Honeycomb now is able to parse values to color categories, no matter the casing of the value.
  • Honeycomb tooltip fixes the color of the node when its pinned.
  • Font weight of menu items and spacing of the Menu.SubTrigger have been adjusted.

PieChart​

  • Supports units in labels for absolute values.

SelectV2​

  • The clearable SelectV2 now only focuses the Clear Selection button instead of two elements when clicking on the filter and tabbing.

Sparkline​

  • Removed 'auto' option from the Sparkline y baseline configuration.
  • Fixed Sparkline being cropped on top in some cases.

Tabs​

  • Right-clicking a Tab component no longer selects them.

TimeFrameSelector​

  • Add support for customizing the TimeframeSelector trigger and add precision to the TimeframeSelector.

0.112.5​

Dependencies​

  • Removed no longer needed peerDependencies from the list.

0.112.4​

SelectV2​

  • Full-width SelectV2 trigger does not outgrow the container.

0.112.3​

Behavioral changes

General

As a general effort to expose more control on className, style and data-testid on all components, the following components now allow setting any of these three to their internal root element: Content, CodeSnippet, Divider, ExpandableText, KeyboardShortcutTooltip, DataTable, DataTableCell, DataTableToolbar, SimpleTable, BaseCodeEditor, FormattedTimeFrame, AppCard, AppLink, Tabs, Tab, TabPanel, Sheet, Trigger, Blockquote, Code, Divider, Emphasis, ExternalLink, Heading, Link, Paragraph, Section, Strikethrough, Strong, Text, TextEllipses, Toast, Tooltip, TooltipElement, Title, Visual, and Description.

Deprecations
  • The label prop on the FormField is now deprecated.
  • The InputRef type is now deprecated and is replaced with the FormControlRef type.
  • The Section component, the DocumentOutlineContext and the DocumentOutlineProvider are now deprecated.

Accordion​

  • Accordion.Section now supports a keepMounted prop to preserve the components content even when hidden.
  • Controlled state on the accordion now works correctly.

Button​

  • Button now aligns the suffix correctly when the width is set to a percentage.

CodeSnippet​

  • Now DQL codesnippet with triple-quotes should be highlighted correctly.

DataTable​

  • Row threshold background color is now correctly applied, also without zebra row separation.
  • Column or Cell action menus are no longer bound by the DataTable boundaries.
  • Improved row height for space efficiency with condensed row density.
  • Fails to sort columns containing numeric values if any value within the column is either empty or includes non-numeric characters, such as commas.
  • DataTable no longer throws an error when server side pagination is used in conjunction with selectable rows.

DQLEditor​

  • When value of the editor is updated programmatically, highlighting should happen only in updated editor.

FormField​

  • The FormField supports using a Label inside the FormField. FormMessages have been added to provide errors and hints that are automatically connected to the form control.

HoneycombChart​

  • Improved quality and performance for honeycomb chart.

Page​

  • Page.Sidebar now supports a keepMounted prop to preserve the components content even when hidden.

SelectV2​

  • SelectV2.Trigger now aligns the suffix correctly when the width is set to a percentage.
  • Empty state is shown when showSelectedOptionsFirst is enabled.
  • ref on the component now exposes a focus function to set focus the trigger.

Tabs​

  • Tab now supports a keepMounted prop to preserve the components content even when hidden.

TextInput​

  • The TextInput now supports browser validation out of the box and displays those errors in the FormFieldMessages slot.

TimeframeSelector​

  • Add support for custom preset items using the TimeframeSelector.Presets and TimeframeSelector.PresetItem compound components.

TimeseriesChart​

  • Added curve prop to provide option of setting the type of curve shape applied to line, band and area series.
  • Timeseries with multiple units and specific Y-axes could filter the data shown in the chart.
  • Adapted the formatter precision by default.

TreeMapChart​

  • Added support for the legend slot.

0.112.2​

TimeframeSelector​

  • Fixes an issue with the TimeframeSelector's DatePicker inputs moving the cursor at the end on changes.

0.112.1​

SingleValue​

  • Faulty alignment in the SingleValue is now fixed.

0.112.0​

Breaking changes

TimeframeSelector

  • The type of the forwarded ref changed to TimeRangePickerRef to include/give access to the from and to input refs. So if you explicitly use the old type for the ref - FormControlWithOverlayRef - you would need to manually rename it to TimeRangePickerRef.
Dependency updates
  • @dynatrace/strato-icons was updated to version ^0.36.0.

Accordion​

  • Accordion content now correctly applies sizing without overflow.

General​

  • Scrollbar styling issue in Chrome 121+ are now fixed.

Charts​

  • Units now are correctly serialized for CSV download.
  • Extended available color palettes with sequential and diverging palettes.

DataTable​

  • The sub rows column is now updated once sub rows are added/removed in the data.
  • Improved custom cell value handling for download as CSV.
  • Newlines characters are now replaced with spaces in downloaded CSV.
  • ColumnSettings buttons now show tooltips when hovered over.
  • Selected rows now reset if the data provided changes.
  • Pagination no longer breaks if there is no data present.
  • data-testid attribute is now exposed on the DataTable.

DQLEditor​

  • Default font color now aligns with designs.
  • The autocomplete label now uses the full width and the command type is no longer shown.
  • Autocomplete list now shows a visual difference between touch/mouse and keyboard focus and hover.

FilterBar​

  • Now updates the states correctly and doesn't trigger an error on initial use.

HistogramChart​

  • Highlighted series no longer get lost after filtering the legend.
  • Adjusted the formatters default precisions.
  • Absolute min and max values now display correctly in the Axes.

Tabs​

  • Adding Tabs dynamically no longer deselects selected tabs.

TextEllipsis​

  • Now recalculates it's state when new fonts are loaded.

TimeframeSelector​

  • TimeframeSelector now features a new design and support for form integration.

TimeseriesChart​

  • Highlighted series no longer get lost after filtering the legend.
  • Fixed misalignment in TimeseriesChart annotations tracks when axislabels were present.

SelectV2​

  • Now emits an onOpenChange event when the dropdown of the Select opens or closes.

0.111.7​

SingleValue​

  • Faulty alignment in the SingleValue is now fixed.

0.111.6​

Dependency updates
  • @dynatrace/strato-icons was updated to version ^0.35.11.
Behavioral changes

General

As a general effort to expose more control on className, style and data-testid on all components, the following components now allow setting any of these three to their internal root element: DonutChart, PieChart, MeterBarChart, MultiMeterBarChart.

CodeEditor​

  • Improved visual representation of read-only mode.
  • The new size prop now allows for a condensed visual representation.

CodeSnippet​

  • The new size prop now allows for a condensed visual representation.

DataTable​

  • Sorting a column in quick succession no longer endlessly toggles the column sort.
  • Toggling the select all checkbox no longer affects the sorting of the table
  • The autoWidth setting for columns now reacts correctly to changing font faces.

DQLEditor​

  • Improved visual representation of read-only mode.

HistogramChart​

  • Panning is now possible in Explore mode via the middle mouse button.
  • Enables the pan feature for the axis in Explore mode when zoom is applied.
  • Navigation within the toolbar with arrow keys now works correctly.

KeyboardShortcut​

  • Remaining props of the component are now passed to the underlying root element.

SelectV2​

  • Activating already selected options in a single select mode no longer triggers an onChange.
  • The dropdown now closes correctly when selecting an option and a custom trigger is defined.

SingleValueChart​

  • Emojis, single characters and glyphs are now supported in the SingleValue icon.

SparklineChart​

  • GapPolicy is now supported.

Tabs​

  • Setting a custom data-testid no longer influences selection behavior of the tabs.

TimeseriesChart​

  • Panning is now possible in Explore mode via the middle mouse button.
  • Enables the pan feature for the axis in Explore mode when zoom is applied.
  • Navigation within the toolbar with arrow keys now works correctly.

Toast​

  • The Toast now allows a custom id to be set in order to avoid duplicate notifications popping up.

TreeMapChart​

  • Now allows importing and exporting of configs.

0.111.5​

General​

  • Updated d3-color dependency due to a vulnerable version.

0.111.4​

Deprecations

Charts

  • ChartInteractionsConfig.defaultMode -This property will be removed, as the inspect and zoom-x modes no longer exist. The default mode will be changed to explore.
  • userData prop is now deprecated on the TimeseriesChart.
Behavioral changes

General

As a general effort to expose more control on className, style and data-testid on all components, the following components now allow setting any of these three to their internal root element: Accordion, Avatar, AvatarGroup, Breadcrumbs, Button, Checkbox, Chip, ChipGroup, Column, Columns, DatePicker, DateTimePicker, FieldSet, FormField, Hint, IntentButton, Label, Menu.Group, Menu.Item, NumberInput, PasswordInput, ProgressBar, ProgressCircle, Radio, RunQueryButton, Select, SelectV2, Skeleton, SkeletonText, Surface, Switch, TextArea, TextInput, TimeframeSelector, ToggleButtonGroup.

DataTable

The new UI for controlling column visibility and column order in the DataTable might have an impact on your UI test if you have been interacting or testing with the column visibility or column order controls.

Dependency updates
  • @dynatrace-sdk/units was updated to version ^0.11.1.

CategoricalBarChart​

  • Inspecting a series action no longer throws an error.

Charts​

  • Annotation markers are now cropped and respect the overflow controls.
  • Zooming can now be performed via the mouse wheel scroll or keyboard shortcut, when the toolbar is collapsed.

DataTable​

  • Introduced a new UI for controlling column visibility and column order. The previous functionality of column visibility has been reorganized and is now integrated into the same column settings modal instead of appearing as an overlay.
  • An issue with initial rendering flickers is now fixed.
  • Column menu actions performance is improved.
  • The DataTable.Cell now allows style and className to be set.
  • Columns are now correctly updated if selectableRows changes.
  • autoWidth columns are now updated once width is unset.
  • Passed columnOrder props are now validated. Violating values, where nested columns would no longer be in the same group, are ignored.
  • Row actions column content now respects the rowDensity: "condensed" mode.
  • By using the new prop maxAutoWidth you can now set a limit on autoWidth per column while still having the ability to resize beyond this limit.

HistogramChart​

  • ChartInteractions can now be set through a configuration.
  • Toolbar can now be enabled through an imported configuration.
  • Keyboard shortcuts for zoom actions will now trigger only while the chart has focus.

HoneycombChart​

  • The tooltip now shows consistently when hovering entries.
  • Unnamed tiles in now receive a default name.

Markdown​

  • Table and list styles are now aligned.

TimeseriesChart​

  • Timeseries now highlights correctly if the data was misaligned from the Timeseries type.
  • Toolbar can now be enabled through an imported configuration.
  • Explore mode is now supported.
  • Deprecated userData prop in favor of extending Timeseries type to allow for custom props.
  • Keyboard shortcuts for zoom actions will now trigger only while the chart has focus.

SparklineChart​

  • The sparkline now allows a Y axis min/max configuration.

0.111.3​

Deprecations

Core

  • The getThresholdColor function has been deprecated.

FilterBar

  • defaultPinnedState prop on the FilterBar.Item has been deprecated. Use the defaultPinnedState prop on the FilterBar component instead.

TextArea

  • The resizable prop has been deprecated. It is replaced by a resize prop, that now let's you define the resize axis individually. To mitigate the deprecation you can change resizable={false} to resize="none".

Charts​

  • The tooltip for the legend item is not shown anymore if the item cannot be hidden.
  • Annotations can consider now a height value in order to adapt properly to a container for certain use cases and prevent overflowing.
  • Fixed infinite resize issue when using the range legend with horizontal layout and chart resizer.

DataTable​

  • Table height now updates if individual row heights change.
  • Cell actions (if defined) will no longer be applied to cells in the action column.
  • The width of columns that have autowidth configured, is now reacting to density changes on the table.
  • Visually improved the Subrows connector, which now spans the entire height of the row.
  • Improved the TableRowActions.Item typing.
  • Alternating row background colors are now correctly applied during scroll.
  • Scroll performance has been improved for large datasets.
  • Positioning of the column and cell action overlay now behaves correctly on wide columns.
  • Column widths are now correctly updated after resizing and changing the column definition.
  • Fixed sub row connectors when used without pagination.
  • Improved the performance of threshold calculations.
  • TableRowActions with long names no longer cause overflow in the table.

Editors​

  • data-testid prop is now exposed for you to control in the CodeEditor and DQLEditor.

FilterBar​

  • The defaultPinnedState prop of the FilterBar.Item no longer has any effect and is deprecated.

HistogramChart​

  • Zoom explore mode now has keyboard support.
  • Thresholds can now be used in Histogram charts.

HoneycombChart​

  • Integrated the chart toolbar and added DownloadData as CSV.
  • Categorical legends can now be used in the HoneycombChart.
  • Set default width to 100% on HoneycombChart.
  • Support for range legends and tile coloring.
  • Enabled HoneycombChart to import and export configurations

Microguide​

  • The visual slot now correctly styles picture and figure tags.

Overlays​

  • Improved initial rendering and positioning to avoid flashing of the overlays in the wrong position.

SelectV2​

  • Adjusted the dropdowns minimum height and width for smaller screens.
  • Selectv2 does not remove selected options when typing in the filter and pressing backspace.
  • In single select mode, the onChange now returns null when cleared instead of undefined.
  • The dropdown now correctly increments the z-index stacking for tooltips within options.

TextArea​

  • TextArea now has a resize prop that can be used to disable resizing or restrict resizing to one direction only. By default, it resizes in both directions but can be set to can be set to horizontal, vertical, both, or none. Note that the resizable prop is now deprecated in favor of the resize prop.

TimeseriesChart​

  • Fixed an issue where metadata would throw an error when there was a gap in data for a Timeseries.
  • Fixed incorrect output of Timeseries chart onZoomChange prop when using right panning.

Dependencies​

  • @dynatrace/strato-icons has been updated to 0.35.9

0.111.2​

TimeseriesChart​

  • Fixed TimeseriesChart issue that crashes the page in some cases after initial loading or resizing it.

0.111.1​

Global, AppRoot​

  • The AppRoot updated its usage of the new version of the DynatraceFlow font face.

Accordion​

  • The Accordion.Content now takes up the whole width of the accordion.

Button​

  • Items within the button now properly align vertically relative to the height of the Button.

CategoricalBarChart​

  • Custom data is passed through to categorical bar chart legend.

Charts​

  • Fixed security-risk-level color palette not applying the muted category/series name on charts. Fixed categorical color palette not using the whole amount of colors on the Timeseries and the Histogram charts when having more than 12 series.

DataTable​

  • The action column header can now be overridden.
  • Row and cell thresholds now have the ability to provide a backgroundColor for the cell or row.
  • An issue with cut off italic text in cells has been fixed.
  • SDK formatters configured via column definition will now be applied also on sub columns.
  • Sorting on the action column is now disabled by default.
  • Page index is now exposed on the DataTable.Pagination in a controlled and uncontrolled manner.

DonutChart​

  • Data of the DonutChart can now be programmatically downloaded by calling downloadCSV on the charts ref.

HistogramChart​

  • The horizontal crosshair now behaves correctly after pinning the tooltip.
  • ZoomIn, ZoomOut and Pan features are now available on the HistogramChart.

HoneycombChart​

  • SeriesAction support is now available for the HoneycombChart.

MeterBarChart​

  • MeterBarChart and MultiMeterBarChart now correctly show an empty chart for 0 values.

PieChart​

  • Data of the PieChart can now be programmatically downloaded by calling downloadCSV on the charts ref.

SelectV2​

  • SelectV2 visible focus now behaves correctly when displaying an error state.
  • onFocus and onBlur events are now exposed on the SelectV2 element.
  • SelectV2 now connects internal ids correctly when used in a FormField.
  • Aria labeling props are now supported on the SelectV2.

SparklineChart​

  • null and undefined values are no longer treated as max values.

Sheet​

  • Sheet now renders actions to the right consistently, even if no title is set.

Switch​

  • Screen reader now correctly announces the Switch checked state.

Tabs​

  • Disabled tabs are no longer activatable.

TextArea​

  • TextArea now has the correct focus styles in error state.

0.111.0​

Breaking changes

CategoricalBarChart, TimeseriesChart

  • The ref for the CategoricalBarChart and the TimeseriesChart now use an imperativeHandle. If you want to access the native element, you will have to access the ref.current.element.
Deprecations

Flex, Grid

  • Unused types for Grid and Flex are now deprecated. These include: FlexContainerCSS, FlexContainerProps, FlexItemCSS, FlexItemProps, FlexStyles, GridContainerCSS, GridContainerProps, GridItemCSS, GridItemProps, GridStyles.

TextInput, PasswordInput, DatePicker

  • Default values for the data-testid are now deprecated and will fall back to undefined.

Accordion​

  • The trigger buttons of the Accordion now have an accessible text for screen-readers.

Charts​

  • Chart color palette value 'warn' now correctly maps on 'log-status' and 'log-level' color palettes.
  • All charts now show the legend when there is enough space at the bottom.
  • Added proper space between Range Legend and resize line in bottom position.
  • Annotation's track, marker and pills feature a new design.

CategoricalBarChart​

  • Added the capability of downloading data programmatically. The CategoricalBarChart now exposes a downloadData function on the ref.
  • Fixed tooltip scrollbar flakiness from CategoricalBarChart.

CodeSnippet​

  • Copying the values of the CodeSnippet with Ctrl+C now works correctly in Firefox.

DataTable​

  • The last nested column header now also uses the remaining space if rowActions are defined.
  • Conversion utility cellRenderer now allows options to control text truncation.
  • Nested headers are now correctly aligned when using ratioWidth and the table becomes scrollable.

DatePicker​

  • DatePicker now supports a data-testid that defaults to the "date-picker" id and aria labelling props.

    Note: The data-testid of the DatePicker, TextInput, and PasswordInput container will default to undefined in the next breaking change. Also, the data-testid of the internal TextInput will be removed.

FieldSet​

  • FieldSet components now correctly take up the available space inside the Overlay and no longer overflow in Firefox.

HistogramChart​

  • Fixed tooltip scrollbar flakiness from HistogramChart.
  • Annotations in the HistogramChart now accept priority props.
  • The HistogramChart toolbar now shows a reset zoom button when zoom interactions are enabled.

MeterBarChart, MultiMeterBarChart​

  • Fixed issue with unneeded scrollbar in MeterBar and MultiMeterBar charts.

Page​

  • Page.Main and Page.Detail panel no longer show the default outline when focussed.

SelectV2​

  • Dropdown overlay now adjusts its size correctly on small screens.
  • The trigger of the SelectV2 is now focused when an associated label is clicked.

Sheet​

  • Removed the margin that was added when there was no Title or Actions in the Sheet component.

SparklineChart​

  • SparklineChart x-axis is now consistent with the TimeseriesChart.

Switch​

  • Disabled styling of the Switch is now consistent across checked and unchecked states.

TextInput​

  • TextInput.Prefix and TextInput.Suffix now also support string values.
  • TextInput now supports a data-testid prop that defaults to the "text-input-root" id.

TimeseriesChart​

  • Added the capability of downloading data programmatically. The TimeseriesChart now exposes a downloadData function on the ref.
  • Fixed annotations marker not being shown when it start/ends outside the chart domain boundaries of the Timeseries.

0.110.4​

Patch Changes​

  • 051c5eba78: Fixed TimeseriesChart issue that crashes the page in some cases after initial loading or resizing it.

0.110.3​

Patch Changes​

  • 568b449f08: GridItem and FlexItem are no longer applied to the DOM.

0.110.2​

Patch Changes​

  • 1dff95660b: DataTable - fixed line wrap for custom cells.

0.110.1​

Patch Changes​

  • Consuming applications that use vanilla extract for styling no longer get a build error due to faulty style imports.

0.110.0​

Minor Changes​

  • 391b131216: BREAKING CHANGE: UseContainerSize hook now returns border box size and content box size.

    You may have to switch from using width / height to contentWidth / contentHeight to get the desired result.

  • 7b21eb4dd5: The Container, Grid and Flex now expose style and className props and have aligned styling for gap sizing.

    BREAKING CHANGE: gridGap, gridRowGap and gridColumnGap have been removed from the API as their usage was deprecated. BREAKING CHANGE: rowGap and columnGap typings are now aligned with the gap property and only accepts the number based SpacingSizes instead of a token value.

Patch Changes​

  • a0d66c8f2b: DataTable - When using UserActions for sorting in combination with enableDefaultSort, now the unsetting of sorting works.
  • df419f282d: Toast - showToast now returns the corresponding toast id and added dismissToast and dismissAllToasts functions that allow for programmatically dismissing one or all toasts.
  • 9cb1e7bd37: Position scrollbar in the sheet on firefox next to the content.
  • f098b237fa: Fixed spacing in DataTable when using rowThresholds together with expandable/selectable/sub rows.
  • e027dc380d: DataTable, Menu and Tabs - added documentation for compound components and changed some types to interfaces to improve proptables.
  • 5d82d3c830: SingleValue: Enabled possibility to extend styles and class names of the SingleValue outer container.
  • ac9872151c: Chip component now has a maxWidth prop to configure its maximum width.
  • b8c61bc1d8: TextArea now has the same background color on focus.
  • 81539c6969: SelectV2 with filtering enabled now allows typing spaces inside the filter input.
  • 347e7caab1: SelectV2 sortSelectedItemsFirst setting now correctly responds to cache misses.
  • b6607cb7a0: SimpleTable now accepts a variant prop, to configure the visual look.
  • c2908741d9: DQLEditor - Fix syntax highlighting for nested commands' keywords following a parameter.
  • 18a2416c2c: SelectV2 dropdown no longer overextends the viewport when used in modals.
  • fe73aaef7a: Integrated annotation tracks and markers in Histogram Chart.
  • d4499235bc: Integrated empty, error, and loading states in the HoneycombChart component.
  • 86332f3ce5: Fixed y-axis order not defined by slots in the Timeseries chart.
  • 288fd68bcd: DataTable - the last column now always uses up the remaining space if the table uses the full width.
  • 64d703733a: Fix button label overflow behavior when using prefix and/or suffix icons.
  • 41b03b79fa: ToastContainer - onChange is cleaned up correctly now.
  • 922e8d1fb7: Export additional chart visualization utility types and methods.
  • 40d88b0ec1: DataTable - prevent the table crashing if sortBy is configured on custom unsortable columns.
  • 5adfdad88e: Filterbar's onChange is only called once for controlled filter items.
  • 91fb666453: Adapting honeycomb chart to integrate tooltip
  • c87d37847a: InputButton now correctly defaults the size prop.
  • 340f805ec9: DataTable - we now provide the ability to define row actions.
  • 0eb2c43948: Fixed bars not being stacked on the categorical bar chart when having only one category.
  • 1b02dfd002: Adjusted keyboard focus handling in the Toast to work the same as in the Microguide and FeatureHighlight.
  • faa116513c: Fixed legend ticks behavior on dataset changing.
  • d0ad3c57e1: Fixed some edge cases in which SingleValueGrid font sizes didn't update properly.
  • 4a56a61f27: Fixed setState warning log in TimeseriesChart
  • 5f382ae324: Added support for overlay stacking to the Drawer.
  • caa46e8dc9: Fix missing userdata in timeseries converter.
  • 1f514e89a7: Added logarithmic support for histogram y axis.
  • 5aaaf3e6a2: CodeEditor - Border has been fixed for the editor in the presence of a scrollbar.
  • 659da6e705: The Heading component now supports adding an ID.
  • 4d7f75ae3a: Fix useless autocomplete reopen in DQLEditor in some cases.

0.109.3​

Patch Changes​

  • ad98b95190: DataTable - fixed line wrap for custom cells.

0.109.2​

Patch Changes​

  • 706701bd9a: CodeSnippet - Snippets with language 'dql' no longer crash if the character | is present in a string surrounded by double quotes.

0.109.1​

Patch Changes​

  • af7f327072: CodeEditor - we now provide a gutter configuration to display the gutter next to foldGutter.

0.109.0​

Minor Changes​

  • 489b9748f1: FilterBar's pinned state is now controllable.

    BREAKING-CHANGES: The defaultPinnedState prop of the FilterBar.Item is removed from the item and can now be set as a configuration object on the FilterBar itself. The record keys are the item's name and the value of the item's pinned state. Migrations are provided and should create the configuration according to the already set defaultPinnedState values. In case those attributes are spread, the migration must be done manually.

Patch Changes​

  • a7192bcca6: Dismissible overlays are no longer closed incorrectly when used in conjunction with a menu.
  • 0a7e5cf47f: A basic version of Honeycomb is now available.
  • 252eb56c97: Implement up-to-date consistent tooltip in the Timeseries Annotations integration.
  • 2fe78dcd0d: CodeSnippet - Single line comments now don't highlight the next uncommented line if 'dql' is set as a language.
  • 049cf195ae: HistogramChart: Added tooltip for annotations.
  • f447169e8c: Add showSelectedOptionsFirst to the SelectV2 to configure whether the options should be reordered to show the selected options at the top.
  • 2a295f939f: Added ChipGroup component and documentation.
  • 7279353d18: Fixed value axis min/max values not being applied in the categorical bar chart.
  • 7d3e772df2: Improves table rendering performance by ~10% by improving the variant handling.
  • d8e2366265: Enabling the disableFiltering no longer hides the filter in the SelectV2 component.
  • 13d02cddb1: Fixed time series chart's y-axis not automatically adjusting its scale when a minimum and/or maximum value was set on the x-axis.
  • 80355e2a34: DataTable - Text overflow ellipsis is now also applied when using a custom cell renderer and wrapping the content with DataTable.Cell.
  • e7b7ac3763: Added support for the toolbar component into the Geo Map component.
  • 4ebb9556ea: DataTable - The next and previous buttons in paginated tables now output the correct pageIndex after using the page select.
  • 1a26b3ea63: The Range legend is now hiding the labels when there are collisions.
  • 0723a747c9: Added support for Log Scale in Histogram Chart for X Axis
  • 29e92faef0: Fixed meter bar that shows 50% when min and max are equal.
  • fb78407f77: DataTable - Loading overlay is now displayed correctly in the presence of a scrollbar in the table.
  • 88e2c4f3f5: Fixed log-status color palette being mapped to log-level color palette.
  • 2d082f5dcd: DataTable - when different column definitions are set, we ensure the widths update properly.
  • 632dc7fbc3: Fixed the categorical bar chart hidden legend property.
  • 6b342923ca: DataTable: fixed misalignment of column widths in autowidth column.
  • Updated dependencies
    • @dynatrace/strato-design-tokens@0.20.0

0.108.5​

Patch Changes​

  • Updated Readme

0.108.4​

Patch Changes​

  • b7a16d19e6: DataTable - when different column definitions are set, we ensure the widths update properly.

0.108.3​

Patch Changes​

  • 0f9e6d572d: Tabs - OnChange is now not called on initial render if selectedIndex is set.

0.108.2​

Patch Changes​

  • 09217dbf2e: Replaced React 18 usage of useId for uuidv4 instead, as it's supported in React 17.

0.108.1​

Patch Changes​

  • 09299bb234: Reverted export of safeRender as this utility should be kept internal.

0.108.0​

Minor Changes​

  • 9a83ec2942: Single and multi meter bar chart: Removed 'unit' prop as functionality is replaced by the 'formatter' prop.

  • 3539e858bf: BREAKING-CHANGE: The SelectV2.Filter component onFilterChange prop is now called onChange.

  • be11b4c6ec: SelectV2 now supports the FormControlWithOverlayRef and is used in the FilterBar's "add filter" dropdown.

    BREAKING-CHANGES:

    • SelectV2 ref changed from a HTMLDivElement to a FormControlWithOverlayRef. Migrations are provided.
    • Tests that open the "add filter" dropdown might need some adjustments, if they're relying on the select test helpers.

  • a199d8143a: Testing subpackage now requires jest@29 to run.

  • 72f4ccc848: Unit SDK version bump and fixed unit and value misalignment in SingleValue.

Patch Changes​

  • 8629164eee: Single meter bar: threshold indicators positions are now calculated correctly when the min value is not 0.
  • 40d1ed0b02: DataTable - Column reordering is now possible via column actions.
  • 09a4dde046: DataTable now supports sub rows.
  • 7175df0e99: Added custom color per each slice in the pie/donut chart.
  • d2baced035: Fixes the SelectV2 height overflowing when the multiple version is used and added the overlayHeightStrategyHandling modifier to keep it consistent with the previous Select.
  • b8472556ea: Fixed missing nice value for x-axis scale in Histogram Chart.
  • 795eaa5a17: Fixed cropped off markers and scrollbar on TimeseriesChart Annotations.
  • f07678bbb5: Fixed the categorical bar chart relative values.
  • 8603bd9d22: Single meter bar and multi meter bar: Updated styling so that the margin is applied to surrounding components instead of the chart segment.
  • ec793d929b: SelectV2 enables clearable selection by default in multiple selection mode.
  • ece0153b1c: Allow React nodes inside the display value slot of the SelectV2.
  • 73d1d2a705: PasswordInput tooltip text can now be customized by adding the new PasswordInput.Tooltip compound component.
  • 57e5c11fc8: DataTable: Fixed issue for a certain case where resizing didn't work after column visibility was toggled.
  • 9cf25ed167: DefaultValue is now optional in the SelectV2.
  • 19ffe250cc: SelectV2 now clears the filter text on close.
  • 8cdfa65532: Removed unused Histogram interfaces from API
  • 4c39bed2f1: DataTable: fixed cell density when column header has custom renderer.
  • aaef101a7b: Integrated annotation tracks and markers in Histogram Chart.
  • 90f37e411f: Container now correctly accepts 0 as value for paddings and margins.
  • 21e6202d85: DataTable - Fixed column misalignment when autoWidth is set to false.
  • 9165e18c4d: The SelectV2 now closes the overlay when clearing the selection in single mode.
  • 3bf8093c00: The Select component is now deprecated in favor of the new SelectV2.
  • 69d66ced75: DateTimePicker precision type is now correctly not exposed on date only pickers.
  • 38b0603317: DataTable - improved comment on data regarding what is allowed.
  • b5963d4678: Cursor is now not-allowed on disabled SelectV2 options.
  • c2e6943516: Fix Chip component styling when using very long keys.
  • 7deee461b5: Add missing props to the PasswordInput API: id, required, onKeyUp, and onKeyDown.
  • 1dbf81584e: DataTable - performance improvement related to cell actions.
  • 729e1c9aa5: SingleValue Area Sparkline fades into transparent in dark mode.
  • ec4d1f1065: Tabs - we have reworked internals and improved the performance when switching tabs.
  • db86b07957: Fixes keyboard navigation in the selectV2, when using shift tab.
  • 6956cb12df: Annotations: Fixed issues with marker being highlighted when having same time and different tracks.
  • Updated dependencies
    • @dynatrace/strato-design-tokens@0.19.0
    • @dynatrace/strato-icons@0.35.0

0.107.0​

Minor Changes​

  • 3210ca072e: Selectable rows in the DataTable can now be used in a controlled way. BREAKING-CHANGE: onRowSelectionChange now provides three parameters: The selected row ids, their original row data and a flag indicating whether the change was triggered by the user or internally. Migrations are provided.

Patch Changes​

  • 4656858894: Implemented the Accordion component
  • 30cdea80be: FeatureHighlight is now correctly inserted before the Toast and/or Microguide, if they exist.
  • 5b40a3c1e4: Interactive chip and chip delete button callbacks are called independently when disabled. Chip styles updated to have correct height in flex containers.
  • cfc651ac82: TextEllipsis works inside the TitleBar.Title element.
  • 9e17edd928: Added private slots for Histogram Annotations
  • f15cbb282b: Upgrade sdk/units package to 0.9.0. Minimum fraction digits are now set for DQL numbers.
  • 1030b673cd: DataTable: When resized, column widths properly fulfill min and max constraints.
  • 25c0ab063e: Improved caching of useBreakpoint hook.
  • b549241012: Timestamp formatter is consistent on when to omit seconds count.
  • 4a3f698c67: DataTable: onColumnResize is now also called when the 1st column is resized.
  • 140f3f09ce: Single meter and multi meter bar chart - Fix default labels not displaying correct values when the chart scale is negative.
  • 2769f915ad: FeatureHighlight no longer warns about conditionally rendered children.
  • 12418fc23d: Page panel now shrinks as much as possible when being added and there's not enough space available.
  • c8c542a332: Editor - Autocomplete popup no longer clips through editor after underlying library (codemirror) update.
  • 0edf9203e0: SelectV2 supports text truncation and customization of the overlay width.
  • 6c7a1091c1: Fixed the Logarithmic scale for Timeseries Bar Chart.
  • ee694cfcff: Fixed TimeseriesChart right axis config being lost when filtering by a series belonging to that axis.
  • 3525089302: DataTable: Removed console warnings for variants without rowSeparation, rowDensity
  • 92affa1b91: The SelectV2 component moved to the preview package.
  • ab41613da4: Fixed TimeseriesChart right-axis threshold not showed correctly when filtering.
  • 2812af93e5: DataTable: We now debounce the onColumnResize callback with 300ms.
  • 6be7e9130f: TextInput now accepts a type property that maps to the native input types.
  • a62a2f9bab: Highlight: Now highlighted text will behave like normal text, long words will not break, even if they overflow the container.
  • ff09429c9d: useFocusRing updates focus when element changes its disabled state dynamically.
  • d930f6bc4f: DataTable now features built-in support for visualizing column data as Meterbar charts.
  • 8794b46e68: Fix broken syntax highlighting in DqlEditor on nested property access.
  • e73d5f31e4: In the Calendar view of the DatePicker, the days outside of the current month are now also clickable.
  • 5059396a55: DataTable - Introduced enableDefaultSort prop to support choosing between custom and default sorting when using the onSortChange callback.
  • 668acb036a: The calendar in the date picker now fully respects the configured user timezone.
  • 170498c507: "page-size" selector for an empty DataTable with pagination is enabled and working properly
  • Updated dependencies
    • @dynatrace/strato-design-tokens@0.18.3

0.106.2​

Patch Changes​

  • 2fced2f1c6: DataTable: We fixed an infinite re-render issue which occurred immediately when the DataTable mounted.

0.106.1​

Patch Changes​

  • fe9d5fa936: Package export map now lists require before the esm packages to ensure jest@29 compatibility.

0.106.0​

Minor Changes​

  • 19c0a9b1a: Changed SingleValue label default color.

  • 0927170a2: Added Histogram chart.

  • 6887ef5b6: Made Annotations description prop optional.

  • b8cd64814: DataTable: Column resizing is now possible also when one or more columns have autoWidth defined.

  • 91d11c330: Added tooltip and legend configuration for single and multi meter bar charts.

  • c9c62bee8: Meter bar and multi meter bar charts can now automatically generate the value label.

  • dee63fe6b: DataTable - We now provide a "selected rows actions" feature that allows you to perform actions on one or multiple rows in the DataTable simultaneously.

  • d6b9d8251: Added 'vulnerability-status' color palette to charts.

  • 50db3e4b4: The Tabs component now passes the remaining props and also allows for controlling the overflow behavior of the tab panel.

  • 159e905ee: Align the DataTable's pagination UI with the latest design.

  • ba2f3facc: BREAKING CHANGE: The DataTable's default cell styling is not applied by default anymore for custom cells. Migrations are provided to re-apply it for existing occurrences.

  • ff96aad75: Improved slots layout display for meter and multi meter bar.

  • 7b5549f57: BREAKING-CHANGE: Size definition prop value changed for single and multi meter bar components as follow:

    • size100 replaced by size8;
    • size200 replaced by size16;
    • size300 replaced by size24;

  • 2fb6f11fa: Fixed icon not showing in Annotations custom actions.

Patch Changes​

  • 606a5f51a: DataTable - Now when a custom rendered header contains an interactive element it can properly emit a trigger event.

  • d7c545630: Multiple tooltips reset the timers correctly and close or open accordingly when moving from one trigger to the next.

  • ae499f244: Custom icons in the annotations now scale as expected in all supported browsers.

  • 4c2623d5f: Fixed the CategoricalBarChart legend, should hide when there is no legend to display.

  • 153214126: Form controls with overlays (select, timeframeselector, datepicker) now use an imperativeHandle instead of a element ref. The handle supports access to the wrapping element and the trigger as well to an open and close functionality.

    BREAKING-CHANGE: The ref structure changed but migrations are provided and should cover most of the use-cases. In case the migrations didn't work properly, the outer element of the component can now be accessed with ref.current?.element and the trigger with ref.current?.triggerRef?.

  • b3e1dee3e: SingleValue icon and unit is not cropped on Windows anymore.

  • 2c6938610: CodeSnippet with DQL selected now correctly escapes quotes within strings.

  • c8cb48787: Page no longer crashes when dismissing a panel that has no calculated size yet.

  • a11175558: DataTable - padding is no longer missing if a formatter is used in a column definition.

  • 63cc4caa5: CodeSnippet with DQL selected now doesn't highlight numbers attached to functions or identifiers.

  • bb82995b8: Links within accent chips now have better contrast when focused with the keyboard.

  • Updated dependencies [58053f192]

    • @dynatrace/strato-design-tokens@0.18.0

0.105.0​

Minor Changes​

  • 56209a61a3: BREAKING-CHANGE: KeyboardShortcutTooltip position prop is renamed to placement, which is automatically migrated.

    BREAKING-CHANGE: Tooltip position prop is renamed to placement, the fallbackPositions prop is renamed to fallbackPlacements, and the TooltipPosition type is renamed to TooltipPlacements, which are automatically migrated.

    BREAKING-CHANGE: Microguide position prop is renamed to placement, which is automatically migrated.

    BREAKING-CHANGE: FeatureHighlight position prop is renamed to placement and FeatureHighlightPosition type is renamed to FeatureHighlightPlacement, which are automatically migrated.

    BREAKING-CHANGE: InformationOverlay position prop is renamed to placement, which is automatically migrated.

  • 2dafac113a: Added formatter to the meter bar chart.

  • e7a63c4aff: Added formatter to the multi meter bar chart.

  • 06ebfb1453: Added start prop to an ordered List.

  • 275dfce1b1: Aligned ExpandableText components design with guidelines.

  • a3d07a31dc: Added tooltip to multi meter bar chart.

  • 1fffc3e614: BREAKING-CHANGE: Removes AppHeaderDeprecated. The AppHeader component from the layouts package should be used instead.

  • 30cb3180d8: Fixed automatically color mapping on time series chart for log-status, log-level, apdex & vulnerability-risk-level.

  • c6b9337457: Added legend to multi meter bar chart.

  • 4edddb56fa: Added new Chip component for showing a complex piece of information in a compact form.

  • a887fd9246: FilterBar now focuses an item when it's selected from the additional filters menu and FilterBar.Items can now be removed only from the menu (the delete button next to each item is removed). Also, a FilterBar.ResetButton is now available, which provides a handler for resetting the filter values.

  • f8d7c0730c: Aligned TerminologyOverlay and InformationOverlay designs.

  • 8e4a2ced64: DataTable - We have provided a space or sub-component DataTable.TableActions for consumers to create and place custom actions for the whole table. Table actions will be just an open slot, and consumers can add any children to this slot.

  • 499b23849c: Support config provider and export configuration in the MultiMeterBarChart component

  • 5b406acd50: Added support for react icons to Annotations component.

Patch Changes​

  • edc78cc13d: DQLEditor autocomplete now opens correctly when DQLEditor is inside a Drawer.

  • e9139563cb: The button now exposes disabled and aria-disabled props to allow for natively disabling a button.

    Breaking changes​

    • The disabled prop now adds the native disabled attribute to the underlying button element.
    • aria-disabled behaves according to the MDN documentation -> only semantically disables the button; events need to be handled by the app dev.
    Migration Guide​

    We don't automatically migrate the disabled prop to aria-disabled, since we don't know which events would need to be cancelled. If you want to keep the button focusable for accessibility reasons, change the disabled prop to aria-disabled and handle events accordingly to avoid triggering an action.

  • b4ae164661: Improved legend items rendering when the legend contains long text items.

  • c7f2875177: Start of week in the Calendar now correctly respects user timeframe settings.

  • 34b53b3331: Fixed the CategoricalBarChart horizontal layout bar displays, should display transparent bar border.

  • e1c9d8da32: Typography List now generates keys for items more intelligently.

  • a32ec0ba68: Improved spacing in meter bar and multi meter bar when there are no optional slots.

  • 27cabd7baa: Aria-label has been added to the generated checkbox item in the Markdown component.

  • b440eb8cf0: Fixes onChange triggered twice on ToggleButtonGroup.

  • ea7b5e32d8: Updated to the latest @dynatrace-sdk/units version. Some formatter helper functions now remove trailing zeros when formatting the value, which affects the styling e.g. in charts.

  • 21e071c47b: The FilterBar accepts a showLabels prop to define whether a label is displayed. The configuration can be overwritten with the showLabel prop on the item.

  • 8be8a3a483: The output of the migrations script now print the path to the file when the migration fails.

  • f42d6c04b2: Fixed an issue with overlay closing when mousedown inside overlay.

  • Updated dependencies [46d42680f6]

    • @dynatrace/strato-icons@0.34.0

0.104.0​

Minor Changes​

  • 3d471f76da: Added support for custom configuration for meter bar chart.
  • 7102de43e5: Added basic tooltip to single meter bar chart.
  • 5a8d3a0087: Improved canvas area, band and bar shape plot performance with a high amount of series and data points.
  • c87d747cfe: Improved SingleValueGrid gap calculation for grids with an even number of SingleValue instances.
  • fa07acf940: BREAKING CHANGE: Removed FormatterOptions support for the SingleValue formatter prop.
  • 472a9803e6: BREAKING CHANGE: Removed React.Node support for the SingleValue label property.

Patch Changes​

  • 1c4c7eb190: react-intl peerDependency range is now extended to ^6.0.8.
  • 8bd7bd7083: Improved stacked area and bar data processing performance.
  • e196752cc4: Fixed TimeseriesChart config override from variant children of gap policy, points to display and value representation.
  • c8f882c9c9: DataTable - The pageIndex in the pagination is now reset to 0 when the data length is changed.
  • 61a4794fdc: When using server-side pagination in the DataTable, the pageIndex is now not erroneously reset to zero once the length of the data changes.
  • 218a5ae175: DQLEditor's autocomplete no longer closes on trying to scroll inside the autocomplete tooltip using the scrollbar.
  • c4aa848e2f: Fix overlay positioning when trigger repositions or animations are not yet done.
  • dedb2a4b4c: Fixed timeseries stacking positive or negative zero values considering previous value sign.
  • 54a7c2a13d: TextInput, NumberInput, and PasswordInput now allow the maxLength prop.
  • 4be77f023b: DQL formatter accepts configuration object directly.

0.103.1​

Patch Changes​

  • f6440ac0e1: Fix: Bump @dynatrace-sdk/user-preferences peer dependency.

0.103.0​

Minor Changes​

  • 395f667521: Added customizable size to meter bar.
  • 491646157f: Added empty and error state to SingleValue component.
  • 4db5cf14b4: Create Simple Multi segment Meter Bar.
  • 99590688a5: Enabled Timeseries, Pie, Donut & CategoricalBar charts to show a loading distractor.
  • 4def99f6be: Added thresholds support for single meter bar component.
  • a7258e1f1e: Restore truncation of legend items after they receive focus.

Patch Changes​

  • d7b4793f76: Dismissible overlays now remain open when selecting a menu item.
  • e1c59f17bb: Fixed react warning messages related to tooltip and axis.
  • b36d273fb8: Fixed SingleValueGrid not sharing the label font size properly, when not all the SingleValue instances had label.
  • 5fab60ce2e: Removed react-aria dependency in Sheet component.
  • 0e28730c52: Tab no longer require a unique title under the Tabs component.
  • b36d273fb8: Fixed SingleValueGrid not accepting a mix of strings, numbers and objects in the data prop.
  • 66125bcc5e: DataTable overlays are now scrollable if they would overflow the screen.
  • b36d273fb8: Fixed SingleValueGrid not showing SingleValue instances in deployed apps.
  • ad4951dea0: Fixed series action inspect dimension now shows value in Categorical Bar Chart.
  • e20fcc5427: convertToColumns now correctly handles 'duration' record types to allow for numeric sorting rather than alphanumeric.
  • e868d1b289: Fixed SingleValue text being cropped on some characters.
  • d634c234f5: Tabs now directly focus on the first interactive element in a TabPanel if there is one.
  • Updated dependencies [7ab1abd321]
  • Updated dependencies [44f40107fa]
    • @dynatrace/strato-design-tokens@0.17.1
    • @dynatrace/strato-icons@0.33.0

0.102.0​

Minor Changes​

  • 0cea4f6eea: SingleValue: Label color is no longer customizable.
  • 2c294844dd: Added a meter bar chart for data visualization.
  • a3b3ce0465: Page: Add prop for disabling page animations.
  • 657133f2e4: BREAKING CHANGE: Renamed Avatar displayLabel prop to abbreviation. If you update using dt-app a migration will be applied automatically.
  • 38596250fc: Added FeatureHighlight component.
  • 27697733fb: Introduced new SingleValueGrid component, which contains several instances of SingleValue inside and provides a consistent layout for all of them.
  • 21a7f94652: Apply interactive styles on interactive surfaces (a and button) only.
  • 5d630f3b99: Light mode appearance is now enforced when printing pages.

Patch Changes​

  • 8cd521836e: Enables the Select All option to take its full width when the Select is initially opened.

  • b290965f28: Add onFocus, onBlur, and aria labelling props to the PasswordInput.

  • d3852ceaa8: Tooltips are now correctly shown in a Chart's Legend/Toolbar.

  • 0a84a9986e: The icon in the ExternalLink component now has the correct accessibility set up.

  • 08b2d6d202: Improved timeseries chart overall performance.

    breaking-change: Removed isGap and absoluteValue from TimeseriesDatapoint.

  • 0910915575: Scrolling of DataTable header and body is now in sync also when navigating via keyboard.

  • e58193b735: Fix NumberInput width when used inside Flex container.

  • e154f74d35: The offset between DatePicker overlay and its trigger is no longer bigger when setting a valid/invalid state with a hint.

  • 4083ecb491: DataTable: You can now trigger a CSV download programmatically using the new downloadData() function.

  • bb8a743e70: Microguide is now correctly inserted before the ToastContainer, if it exists.

  • 1b992569d4: Expandable row now takes the full width of DataTable, even if it is horizontally scrollable.

  • Updated dependencies [428e98b5f3]

    • @dynatrace/strato-design-tokens@0.17.0

0.101.2​

Patch Changes​

  • 6231597364: Fix NumberInput width when used inside Flex container.

0.101.0​

Minor Changes​

  • c3dc6cc25: BREAKING-CHANGE:TextInput now uses compound components for Prefix and Suffix and the forwarded ref now uses an imperative handle (of type InputRef) to allow access to the wrapper element and the input element. A migration is provided for using the prefix and suffix icons and renaming the inputRef prop to the new ref prop. The migration also changes simple usages of the old ref type, but for more complex scenarios it might still be necessary to migrate manually.

    How to migrate: If you already used a type for the TextInput inputRef and the migration didn't change it, you need to replace it with and import InputRef from the @dynatrace/strato-components-preview/forms package. If you need to access the input element and the migration didn't already cover your use case, you can access it like this: ref.current?.inputRef, where ref is the forwarded ref. If you need to access the wrapper element, you can do it like this: ref.current?.element.

  • ae21c2ac6: Added empty and error state to Sparkline component.

  • e9f3c0e7e: Fixed Chart error message with colon when there is no error message to show.

  • f030818f3: The ChartLegend is now cleaning its selection when the chart re-renders.

  • 333886be8: Added value type for labels in Pie and Donut.

  • e402b82c6: Aria-label for the column header can now be set explicitly in the DataTable's column definition.

  • ac33994c4: Conversion utilities: Add optional parameter to convertToColumns for providing column options e.g. ratioWidth: 1

  • 2aa025af7: DQLEditor autocomplete improvements:

    • Only open autocomplete in DQLEditor when starting a new command or parameter followed by a space
    • Move information of tooltip to the top of the DQLEditor autocompletion dropdown
    • Restyle information panel and enable syntax highlighting
    • Add middle ellipsis for long labels

  • e7e8efdbb: Fixed automatically color mapping on time series chart for log-status, log-level, apdex & vulnerability-risk-level.

  • 4abf6c9bf: Set color palette mode to single-color by default on the CategoricalBarChart.

Patch Changes​

  • b9129876a: DataTable - fixed allowing column contents to be 100% of the width.

  • db9269842: react-is is now a peerDependency in order to allow a smooth transition over to react@18

  • c6ea92e1f: DataTable cell with cell actions no longer bleeding into the next cell.

  • 98344677a: Fixed aria-labelling props used for the Select.

    Note: The native, hidden select is now also hidden from screen readers to fix the duplication of the aria-labelling props from the trigger button. If your tests rely on the native, hidden select or its options, you can now only access them by adding the option { hidden: true } to your selectors.

  • da0246713: Adjusted internal padding styles of the Button component.

  • 099efd20e: Adjusted Sparkline area gradient color and fixed first segment of the line being lighter than the others.

  • 0924438dc: A bug in the DataTable, that didn't resize the table when the height property changed, has been fixed.

  • 4411371b5: Editors now correctly apply formatting for highlighting new added values.

  • ba9a9a31f: Rollback the old Timeseries loading display.

  • 116b2aef8: Fix syntax highlighting for escaped backslash in DQLEditor.

  • 4d7859fdf: Button now renders icons correctly within its content section. Button content now defaults to inline-flex.

  • ff24d95c2: The Tooltip now also calls the onOpenChange callback on unmount and clears the opening warmup timeout.

  • 0781b69d0: Refactored annotations data processing logic and fixed grouping by time error.

  • Updated dependencies [333b2c402]

    • @dynatrace/strato-design-tokens@0.16.0

0.100.1​

Patch Changes​

  • 3c30614a3: react-is is now a peerDependency in order to allow a smooth transition over to react@18
  • c3f86ca94: @testing-library/user-event peerDependency range has been extended to allow for newer major versions as well.

0.100.0​

Minor Changes​

  • 1670293ab: Fixed toolbar rendering even if no config was present.

  • bc7a99374: Deprecated Table has been removed from the library. Alternatively use either the DataTable or SimpleTable.

  • 77a82c7dd: Introduced Trend component integrated with the SingleValue. Redesigned SingleValue internal layout to give more space to Sparkline.

  • 5409fd318: Introduced alignment functionality as a prop to the SingleValue component.

  • 2093aca18: Experimental support for react 18 has been added.

    This is the first draft containing compatibility for react 18. Please do not upgrade to react 18 in your applications when working on production applications as there are still some issues to be resolved.

  • bb6052918: The Avatar component can now be polymorphed.

  • 488579a75: The page content can now be scrolled while the tooltip's series action menu and the legend menu are open.

  • d1ecb3801: TimeseriesChart data points are now displayed at the middle of a timeframe.

  • 201976390: react-intl is now listed as a peerDependency, effectively lifting the hard version lock. You are now able to use your own version of react-intl. Migrations to add react-intl in the previously used version are provided.

  • 5598528ee: Added Empty and Error state feature into the CategoricalBarChart.

  • 6c7312d1e: Added empty and error state to pie and donut.

Patch Changes​

  • a4729e45e: The fixed collapsed toolbar menu now correctly triggers the overlays x-Axis zoom and pan functionalities.
  • 48e0b7fc7: DataTable: Now the pagination defaultPageSize can be properly exported in the configuration.
  • 49a3fd23d: BREAKING CHANGE: Removed unused prop onSeriesClick from CategoricalBarChart and TimeseriesChart.
  • 85b6fc8ad: Fixed the Timeseries toolbar A11y. Ensured that the keydown shortcuts were working correctly. Triggered X Axis zoom and Panning actions with the enter key. In Panning mode, allowed cancellation with the escape key.
  • 973bb2fe9: Fixed SelectIndicator rendering issue when using useListboxOptionsWithIcon when passing too long texts. Fixed SelectSection title causing issues when passing too long texts.
  • 3a14a2f8f: DataTable: If empty user actions are defined cell no longer disappears.
  • 61a97bedf: Fixes an issue when clicking an element inside the roving focus container and navigating away with Shift+Tab, then with Tab.
  • 4eabbf08d: DataTable defaultSelectedRows now work correctly without pagination.
  • fb4fe6e59: Editors now consider min-height and max-height of wrapping flex container when using fullHeight.
  • 4b818c488: DQL query results displayed in a DataTable instance are now correctly serialized, when downloaded as csv. Arrays and Records are not currently supported.
  • ed479fa81: CodeEditor's autocomplete overlay now stacks correctly above a Surface component.
  • Updated dependencies [68ce03dd9]
  • Updated dependencies [2093aca18]
  • Updated dependencies [75602aaea]
  • Updated dependencies [2093aca18]
    • @dynatrace/strato-design-tokens@0.15.0
    • @dynatrace/strato-icons@0.32.0

0.99.3​

Patch Changes​

  • d78e931e5: Fix charts not taking the full available width.

0.99.2​

Patch Changes​

  • 521353dc7: DataTable selectable rows now work correctly when used with pagination.

0.99.1​

Patch Changes​

  • c1e249b31: Editors now consider min-height and max-height of wrapping flex container when using fullHeight.

0.99.0​

Minor Changes​

  • d34cb7582: Added Empty and Error state feature into the TimeseriesChart.

  • 284ac779d: DataTable default minimum column width is now 30 instead of 100.

  • d3a9fb046: The surface now adds interactive styles autonomously when using it as an interactive element.

    BREAKING CHANGES: Removal of the interactive prop from the surface. It automatically styles all interactive surfaces, meaning all surfaces have a tabIndex or an underlying a or button HTML tag. There are migrations to remove the interactive prop and for interactive elements it shouldn't change anything. All those elements that do not rely on an interactive HTML syntax would need some manual adjustment to align the focus behavior.

  • 647109204: Changed the SingleValue internal layout. Now the value, label, unit and sparkline are better positioned and distributed, and only have the vertical layout.

  • 7cd78637d: Adds an Inner element to the DonutChart. This allows you to customize the middle section within the DonutChart.

  • 1d8017046: Removed the visible focus outline in clearable multiselects.

  • ed6ba5b51: In the DataTable component a callback event onColumnResize is exposed that will be triggered when the user resizes a table column.

  • 32c07f5d9: Remove value dimension from name of timeseries converter result if it is identical for all timeseries.

  • 9350a30ee: Charts color palettes apdex, log-status, log-level and vulnerability-risk-level now automatically map the colors to the values.

  • 27ade7951: BREAKING CHANGE: DonutChart: Added new parameters to the Inner Component function.

  • 74c84a37d: Height calculation in Page Panel and Page Drawer is now aligned.

  • f04435037: Adds support for anchors as part of the ActionGroup.

  • c7e162faf: Adds support for custom series actions for PieChart and DonutChart.

Patch Changes​

  • dd30f691e: Fixed misplaced Timeseries and Categorical magnifiers and grid lines when the chart was center aligned.
  • 5612598e0: In the DataTable, when the column actions are enabled, the column group header should not contain an empty actions menu when actions are unavailable.
  • 3dec855d6: Button with fixed width and prefix and/or suffix elements no longer overflow.
  • 981372c05: useRovingFocus hook now consistently sets focus when navigating away from a container with shift+tab. It now also correctly navigates to the new item when changing the initialIndex dynamically and tabbing inside the container.
  • a1fc9f454: Fixed bars being misplaced in the CategoricalBarChart when having single dimensions and grouped mode.
  • 1ba673398: Bump @visx version to ^3.0.0.
  • 59296ec26: DataTable: Reselection works now when only reselecting 1 item less and onSelectionChange is called with correct values when selecting multiple rows.
  • 3001bbfa3: In the DataTable the correct row will be selected when any rows are expanded.
  • 20ca129b7: Fixed toolbar expanding out of chart bounds.
  • 122e43b75: Fixed thresholds not being shown with infinite values in TimeseriesChart and CategoricalBarChart.
  • 37000193f: TextArea can now set its width to full, content (default), or a specific width.
  • 2c09d45a0: Improve the formatting of the CSV data of the categorial chart
  • 5640fd9a6: Ellipsis is now correctly styled if used in a Link.
  • 2a915f948: Keep focus in dql and code editor when pressing tab.
  • d6b11aa3c: Fixed width of ProgressBar in Flex containers.
  • c84d71d06: Fixed the Timeseries X axis zoom selector opacity when accessing through keyboard shortcuts.

0.98.0​

Minor Changes​

  • b9b1d688f: DataTable now accepts a loading prop, which will display one of these 3 loading states:

    1. When the data table is initially loaded and columns and data are being loaded.
    2. When the table is loading new data.
    3. When the user switches to a new page and the data is being loaded.

  • 28c4d1817: Added empty, error and loading state core components.

  • c3376c0c7: Menu.Content now allows a avoidCollisions prop to be set (defaults to true). It can be used to override the default positioning behavior which is trying to avoid collisions.

  • e31624091: DataTable row expansion can be controlled through props.

  • c0118cfb6: The Codesnippet now correctly copies the selected content only.

  • 8ac8e8e5d: Added support for uncontrolled detail view and sidebar for the page component.

  • 0d4bc697d: Charts Toolbar: Hide grip control when draggable is false.

  • faf6dfd0d: Added unit prop to SingleValue.

  • b83b72f35: List typography component has been redesigned.

  • 197351ea5: TimeseriesChart: Added toolbar configuration to shared config provider.

  • 7b821a4a6: The defaultValue for an uncontrolled Switch component is now optional.

  • b11e8abb8: DataTable: If rowSeparation and rowDensity are set to empty values during DataTable configuration import, they will fallback to default values.

  • 40ad7f47d: Fixed wrong font-weight in Surface.

  • 34cd87587: Toolbar: Collapse depending on container size.

  • b919144ce: Extended the properties that could be configured via Shared Config to the Sparkline when is within a SingleValue.

    • Color, showTicks and variant, are now configurable.

  • 93c31ebec: Icons now support custom sizes and predefined sizes were updated.

    BREAKING-CHANGE: Icon size "large" was changed from 64 to 32 pixels, and "text" option was removed. Migrations are provided.

  • 1c03c05d0: Adds a controlState to the TimeframeSelector.

  • 49bf663f2: Implemented the categorical bar chart custom actions.

  • 5ab764941: Toast: Added support for JSX in the message for formatting.

  • 012ba0ab5: All Editors now accept AriaLabelingProps as part of the props.

  • 7f60303f4: DataTable doesn't show the expandable content anymore if it's outside the virtualized viewport while the row is inside.

  • d748dbb4e: Tabs can now be rendered conditionally.

  • 8fdf01497: Add units and proper value formatting to DataTable.

  • fac19bc85: The scrollbar colors have changed.

  • 0496b6bc0: BREAKING-CHANGE: Adjusted DataTable Toolbar API:

    • DataTable.Toolbar.DownloadData changed to DataTable.DownloadData
    • DataTable.Toolbar.FontStyle changed to DataTable.FontStyle
    • DataTable.Toolbar.LineWrap changed to DataTable.LineWrap
    • DataTable.Toolbar.VisibilitySettings changed to DataTable.VisibilitySettings

    Migrations are provided.

  • bdb976a35: DataTable and SimpleTable now allow for configuring vertical alignment as well.

Patch Changes​

  • 7e704dc4f: Fixed misplaced borders in the TimeseriesChart on keyboard accessed panning mode.
  • c1ec298e9: NumberInput cursor now moves to the beginning/end when pressing Home/End and no min/max value is set.
  • 34f822845: Fixed TimeseriesChart threshold values displaying in flipped order.
  • 4bf092198: Fixed y-axis max tick not to surpass 100% when displaying relative value representation in timeseries chart.
  • 7c675d2f1: ToggleButtonGroup now correctly sets the initial focus on the selected element.
  • 27b713c13: Fixed and refactored Timeseries overlays interactions.
  • 7e704dc4f: Fixed the magnifier is not being showed when x-zoom is being selected.
  • 48d46a5ff: Fixed wrong icons displayed while interact with the ChartLegend.
  • 536cec967: Improved the display of axis lines and threshold lines in charts, addressing issues like inconsistent thickness and overlapping lines.
  • f7f9e29c2: Fixed TimeseriesChart crosshair line being showed over the data points.
  • f9ea3e5ba: Fixed tooltip not being properly updated in the TimeseriesChart between data points with the same value.
  • ac1166276: Fixed Annotations timestamp indicators in Timeseries not showing.
  • 4659e1f7a: Added 8px of padding around the ChartLayout.
  • Updated dependencies [f341a6aa4]
  • Updated dependencies [939fb7519]
  • Updated dependencies [93c31ebec]
  • Updated dependencies [261d50fcb]
    • @dynatrace/strato-design-tokens@0.14.0
    • @dynatrace/strato-icons@0.31.0

0.97.1​

Patch Changes​

  • 83bc44fc4: Improved text width detection for TextEllipsis to avoid truncating text when enough space is available.

0.97.0​

Minor Changes​

  • 125d32b73: Toast can now be focused with Cmd+F6 as well.
  • 04f4b3762: DataTable: Now header dividers have the correct height when sub-columns are hidden.
  • c6c029753: BREAKING CHANGE: Table column types now enforce the ID and accessor rules. Migrations are provided for cases with missing IDs.
  • 66f502685: Success variant of the Toast has been added.
  • f306fa458: - Updated dependency @radix-ui/react-dropdown-menu from 0.1.1 to 2.0.4 (used by Menu component).
    • BREAKING CHANGE: Menu.TriggerItem was renamed to Menu.SubTrigger, Menu.Content tags inside nested Menus are now of type Menu.SubContent and nested Menus are now of type Menu.Sub. Migrations are provided, however there might be corner cases where manual changes might be required like when imports got renamed or affected components get styled with styled-components.
    • The new version of @radix-ui/react-dropdown-menu may occasionally cause issues with unit tests. If you get an error message like this, you have to use a workaround: TypeError: Cannot read properties of null (reading 'documentElement'). In this case, add the following line to your test setup: afterAll(() => new Promise((resolve) => setTimeout(resolve, 0)));. For more information, see Comment on #1908 getDocumentElement null during testing.
  • 3935565f3: Added Avatar and AvatarGroup components.
  • 8647f6c75: The configured alignment from the column definition now takes precedence over the alignment based on columnType.
  • b4e0232fe: DataTable: Table body height is now calculated correctly during first render.
  • d196f6ae7: Improve dql suggestions in DQLEditor.
  • ba7753624: Removed the LoadingIndicator component. Use the ProgressCircle component instead.
    • BREAKING CHANGE: The LoadingIndicator component is no longer available. There is a migration available. Please update using the dt-app update command.
  • b75de55e1: DataTable export to CSV now handles arrays, undefined and null.
  • e3298fa97: Dismissible overlays now remain open when closing a Toast notification.
  • 9d0b9a5f7: CodeSnippet now provides an onCopy callback.
  • 15cf8b92a: The DataTable now has a shortcut for selecting/deselecting multiple rows.
  • e08d8edac: Page panel sizes type changed from string to numbers for each size.
  • 459b2de72: Unify error states design for forms components.
  • 80c262338: CodeEditor and DQLEditor now expose onFocus and onBlur events.
  • 3f018ec4d: Add Microguide component.
  • 0a5963ce2: The DataTable now has a new toolbar button for toggling whether lines should be wrapped in all columns of the table.
  • 537c08d64: The Code component now uses the field background color.

Patch Changes​

  • 1b2334ef4: Handle modifiers correctly if the intent button is triggered via the keyboard.
  • 1f1b4b390: Column and Cell action menus in DataTable are now aligned in accordance to column alignment.

0.96.0​

Minor Changes​

  • 5ce5e0ed3: You can now configure a customizable message to be displayed in the absence of data in the DataTable component.

  • e24851c3a: Extend IntentButton to support recommending an appId and intentId.

    Breaking changes​

    • Removed IntentIconButton. Use IntentButton with iconOnly property instead.

  • 1cfdbdf68: With changes to column resizing when fullWidth is set to true, header groups alignment is broken in certain scenarios.

  • 247fa2212: On DataTable columns you can now use SDK formatting i.e. you can specify column formatting with the notation of @dynatrace-sdk/util-formatters.

  • 97e8fa426: useBreakpoint hook with an array query will no longer cause re-renders.

Patch Changes​

  • 2193f373a: Using a simple text input no longer throws a warning that it's switching from uncontrolled to controlled.
  • 3f3bed6b2: DataTable select all button now works correctly in Firefox.
  • cc2558137: FilterBar now calls onFilterChange only once when multiple items are added at the same time using the MoreMenu.
  • 858cf0caa: The multiple Select trigger now correctly displays text values of complex options.
  • 84b973a0d: CodeSnippet no longer applies rounded corners in nested elements.
  • 3b9f2f0ff: In the DataTable cells with user actions defined, the autoWidth setting is not resizing the column based on the content.
  • 89bdf552a: The FilterBar onFilterChange callback is no longer cached.
  • acb747085: Introduced alignment property for Menu.Content that determines how the menu is aligned relative to its trigger.
  • 6b3d7e6d7: The FormField no longer nests labels in case a custom label is used.
  • 6e5ab1f51: The FilterBar can now display the text of custom labels and the MoreMenu now truncates multiple items with an ellipsis when they overflow. Also, when using custom labels in the FilterBar.Item, the input id and the label can now be properly connected with the htmlFor attribute.
  • 2d20942c8: Fixed regression that caused overflowing cell content to be cut off without ellipsis in DataTable.
  • dcd7c829f: Editors background no longer bleeds out of it's container.
  • e8ee33d2b: Increase scrollbar visibility in Firefox.
  • Updated dependencies [d47ee3cc8]
  • Updated dependencies [5546129ae]
    • @dynatrace/strato-design-tokens@0.13.0

0.95.0​

Minor Changes​

  • 0f6fd4cbd: DataTable: Overscan for virtualization is now set to 5 to improve performance.

  • 9565adc69: DataTable: Now if all sub-columns are hidden, the header height will collapse to one row.

  • fef794dd4: CodeSnippet: Selecting and copying with 'ctrl/cmd + c' doesn't copy the line-numbers anymore.

  • 3d5249924: Fixed Divider layout in the TitleBar when using it inside Flex layouts.

  • 164247799: DataTable: The threshold for the rows (used for row highlighting) can be configured and applied at the DataTable level as table props.

    BREAKING CHANGE: Row highlighting is not possible to configure via column definition anymore. Property highlightRow is removed from Threshold options.

    Before:

    const column: TableColumn[] = [
      {
        header: 'Firstname',
        accessor: 'firstname',
        thresholds: [
          {
            value: 'Emery',
            comparator: 'equal-to',
            color: 'red',
            ~~highlightRow: true,~~
          },
        ],
      }
    ];

    Now the row highlighting must be defined on the table level by using data table prop rowThresholds.

    See usage examples

    After:

    <DataTable
      rowThresholds={[
        {
          id: 'firstname', // column accessor/id must be specified
          value: 'Emery',
          comparator: 'equal-to',
          color: 'red'
        },
      ]}
    />

  • 73fe1d161: DataTable: Under certain scenarios header groups are not aligned properly.

  • 9cd012cc0: Heading: The semantic level is now set to same level as the visual level, if not specifically specified with the 'as' property.

  • 68b5500d6: In the DataTable, default column actions are not rendered on expandable/selectable cells anymore.

  • 6097dd0b9: Unify component prop interface names and fix DOMProps imports.

    Breaking changes​

    • Renamed component prop interfaces CheckboxProps* to Checkbox*Props
    • Renamed component prop interfaces SwitchProps* to Switch*Props
    • Renamed component prop interfaces TabsProps* to Tabs*Props

  • c37db1add: In the DataTable, if all regular columns are hidden now the expandable and selectable columns are also hidden.

  • 668b98aa9: CodeSnippet/CodeEditor: design is now aligned

  • 502c64d42: Page compounds can now be rendered anywhere in the page's subtree and no longer need to be direct children of the page.

  • 8218d489d: Fixes ability to resize when the table is fullWidth. Also, changes the column width allocation when fullWidth is enabled. Instead of all columns proportionately expanded, all columns remain same and additional space is taken by the last column or last column is expanded to take remaining space.

Patch Changes​

  • 36ae00add: Fixed bug in the DQLEditor where onVisibilityHandler reference was never updated on re-render.

0.94.3​

Patch Changes​

  • Categorical axes now have the correct padding again.

0.94.2​

Patch Changes​

  • 90f42a354: Menu now no longer requires a second click in Chrome to open after a re-render.
  • 42b7f1bdf: Expandable row content in Datatable works with fullWidth again.

0.94.1​

Patch Changes​

  • 1931e9952: Packages now provide a Readme file within them.
  • Updated dependencies [1931e9952]
    • @dynatrace/strato-design-tokens@0.12.1
    • @dynatrace/strato-icons@0.30.5

0.94.0​

Minor Changes​

  • 146105e18: When column groups are present, include parent header also in the downloaded csv file.

  • 136a64171: DataTable pagination go to end/start now also reset row selection. In this regard, they now behave the same as next/previous.

  • d5b8ddaa5: Cut and paste are now no longer possible for read-only editors.

  • adc8fca27: New toasts are now shown at the bottom instead of the top.

  • c49ee0302: The Button now supports loading states and shows an indeterminate ProgressCircle when loading.

  • 4d7ee26e6: The RunQueryButton now uses the ProgressCircle to display the loading state.

  • fee77609a: Release the NewPage component as stable Page. Page panels now also support minWidth.

    Breaking changes​

    • The previously deprecated Page component is replaced by the new page component.
    • The old page's SideBar is renamed to Sidebar with the replacement of the page.
    • Mandatory dismissed and onDismissChange prop on the Sidebar.
    • The compounds of the page (Header, Sidebar, Main, and DetailView) must be rendered as direct children of the page.

    The following example will no longer work:

    <Page>
      <Page.Header></Page.Header>
      <Routes>
        {/* route 1 */}
        <>
          <Page.Sidebar></Page.Sidebar>
          <Page.Main></Page.Main>
        </>
        {/* route2 */}
        <>
          <Page.Sidebar></Page.Sidebar>
          <Page.Main></Page.Main>
          <Page.DetailView></Page.DetailView>
        </>
      </Routes>
    </Page>

    You will have to restructure your app and either pull out the page to the topmost level and add the routes to the corresponding panels, or create a page for each route.

    <Page>
      <Page.Header></Page.Header>
      <Page.Sidebar></Page.Sidebar>
      <Page.Main>
        <Routes>...</Routes>
      </Page.Main>
      <Page.DetailView>
        <Routes>...</Routes>
      </Page.DetailView>
    </Page>
    <Routes>
      {/* route 1 */}
      <Page>
        <Page.Header></Page.Header>
        <Page.Sidebar></Page.Sidebar>
        <Page.Main></Page.Main>
      </Page>
      {/* route2 */}
      <Page>
        <Page.Header></Page.Header>
        <Page.Sidebar></Page.Sidebar>
        <Page.Main></Page.Main>
        <Page.DetailView></Page.DetailView>
      </Page>
    </Routes>

  • deb5efa42: In DataTable onRowSelectionChange() callback avoid exposing internal library data structure in the event parameter. Only expose the original data which is selected. Breaking change: The data in the event parameter is now at the top level, so instead of data.original use data.

  • 3e46a220f: BREAKING-CHANGE: DataTable now only accepts type 'number' for the column 'width' property.

  • 829c403c2: The Switch component has a new design and internally uses an input now.

  • af603da28: Removed icon in front of FilterBar.

  • 1c1b4101e: DataTable column resizing issues

  • 9430eb7b8: Page panels can now be resized by keyboard actions (ArrowLeft and ArrowRight) when focusing the resize handle.

  • 096ed54b2: Add Surface component.

  • c397ce675: The Link/ExternalLink/AppLink always shows an underline.

Patch Changes​

  • 1545c3413: Make truncationMode property optional for TextEllipsis.
  • 84c4f70c0: Menu now only closes once forcibly if outside of the viewport.
  • dd985fc37: - Disable column actions when null is returned instead of TableUserActions.
    • Disable cell actions when null is returned instead of TableUserActions.
  • 2942cc40a: Fix parenthesis highlighting in DqlEditor. (EXA-5678)
  • 6f2f0c9b7: Menus now close when the window is out of focus.
  • 0df78aee0: Fixed issue where text got completely truncated when TextEllipsis was used inside a Button.
  • 302538645: Fix failing timeseries converter with empty array. (EXA-5646)
  • 4145facbd: Fixed bug where sometimes the available width for ellipsized text was assumed to be larger than is actually was.
  • Updated dependencies [ecab25048]
    • @dynatrace/strato-design-tokens@0.12.0

0.93.3​

Patch Changes​

  • 4006e87e6: Fixes missing autoComplete in the PasswordInput component.

0.93.2​

Patch Changes​

  • c7265f4bb: Migrations for version 0.93.0 are now referenced correctly.

0.93.1​

Patch Changes​

  • 69c82fb80: Testing subpackage now supports the correct entry point after a regression.

0.93.0​

Minor Changes​

  • 9360156bc: In the DataTable, the correct hover styling is now applied to all column headers with column actions defined.

  • f676e86bb: Editors now have a new focus behaviour. When navigating via the keyboard, users now have to press ENTER to start editing.

  • b5c1b2097: UseRovingFocus does not overwrite styles attribute of the ref anymore.

  • 83e06e770: Fixed wrong button variant for toast dismiss button.

  • 12d80fb91: @dynatrace/strato-components-preview/conversion-utilities has been updated to use @dynatrace-sdk/client-query-v09 instead of @dynatrace-sdk/client-query-v02.

    Breaking-change: This change introduces a lot of changes since the move from RecordV2Beta[] to QueryResult. The conversion-utilities package is no longer compatible with @dynatrace-sdk/client-query-v02. Most of the conversion utilities have changed to accept ResultRecord[] and/or RangedFieldTypes[] that are provided from @dynatrace-sdk/client-query-v09. Please be aware that the conversion-utilities api may change at any given time to match changes in @dynatrace-sdk/client-query.

  • 0222bfa25: Update to client-query 1.0 sdk

  • dc51f4067: Divider now accepts a variant and a color option.

  • f73c0ef6a: Hiding a column can now be added to the column actions menu using TableUserActions.HideColumn.

  • fa36c72b1: Using dismiss functionality instead of the collapse functionality on NewPage.Sidebar.

    Breaking-changes:

    • Renaming onDismiss to onDismissChange and extending it with a suggested state and reason
    • Removing collapse form the NewPage.Sidebar
    • Introducing onDismissChange and dismissed on the NewPage.Sidebar

  • 59a4bf430: TimeseriesChart now supports SDK units.

  • e8d3562dc: The DataTable's default styling (variant) has been adjusted. It now sets rowSeparation to horizontalDividers and sets contained by default.

  • dae1f5ddd: @dynatrace/strato-components-preview/editors has been updated to use @dynatrace-sdk/client-query-v09.

  • 84d1040c2: Fixed missing button when there are collapsed breadcrumbs.

  • 121d2c8a3: Add Container component.

  • d04543629: Replaced @dynatrace/strato-components-preview/formatters formatters with the @dynatrace-sdk/units formatters.

Patch Changes​

  • 5dae97397: Updated dependency use-resize-observer from 7.1.0 to 9.1.0.
  • 56868ab20: Fixes an issue when clicking an item inside the roving focus container focuses the first item and then the clicked item. Also, fixes shift tabbing to skip the wrapping container that's just used for checking non-focusable items.
  • d8e7a9ee1: Ordered lists now increment correctly when nested.
  • f8fc55854: Minor performance improvement in Menu component.
  • 344c0fe41: Fix bug where text inside TextEllipsis component gets truncated even though enough space is available (only occurs when middle ellipsis is used in combination with Flex).
  • Updated dependencies [0e04923ac]
    • @dynatrace/strato-icons@0.30.0

0.92.1​

Patch Changes​

  • 99f9fad20: Migration function for 0.91.0 will no longer fail the entire update process when the source file fails to parse.

0.92.0​

Minor Changes​

  • 245ebf470: NewPage component now allows custom style overrides.

  • 2d9224a15: Button now supports variant, color, size, textAlign and width props and Button.Prefix and Button.Suffix components. BREAKING CHANGE: Options for the variant and width props changed. The props prefixIcon and suffixIcon are no longer supported. There is a migration available. Please update using the dt-app update command.

  • 12c32b18d: Text style variants are now aligned with the new design token structure.

    BREAKING-CHANGE: Text style definition is split up in textStyle and fontStyle to reflect the new token structure (see Text component and getTextStyle/getTextStyleCss). The exported styles are renamed and all text styles are now located in the 'core' package and removed from the 'typography' package.

    There is a migration available. Please update using the dtp-app update command.

  • 1c5151de0: ExternalLink component now accepts an onClick handler

  • 6ad516425: Added ability to escape DataTable column accessors using quotes.

Patch Changes​

  • b0593ce9f: Tables - Adjust TableUserActions component to allow for more flexible wrapping and usage patterns.
  • a012fea19: DataTable - vertical dividers are not aligned when horizontal scrolls are present.

0.91.2​

Patch Changes​

  • d89ce7678: Publish config in packages has been fixed to ship correct files.
  • Updated dependencies [d89ce7678]
    • @dynatrace/strato-design-tokens@0.11.10
    • @dynatrace/strato-icons@0.29.1

0.91.1​

Patch Changes​

  • Updated dependencies [74c54b2ad]
    • @dynatrace/strato-icons@0.29.0

0.91.0 (2023-03-06)​

Features​

  • preview-charts:
    • Removed color and original unit from Timeseries.
    • Added new menu for series actions on the Tooltip.
    • Removed suffix prop from SingleValue.
  • preview-notifications:
    • Toasts can now also be spawned outside of a component context.
  • preview-tables:
    • Toolbar component for downloading data from table is now available.

Bug Fixes​

  • preview-charts:
    • Fixed performance issues LineCanvas.
    • Fixed issue on the pie/donut config props not taken into account. BREAKING-CHANGE
    • Annotations
    • Tooltip not showing the proper x-axis datapoints on time series chart.
    • Fixed maximum call size getXAxisRange.
  • preview-layouts:
    • Adjust newPage side-panel padding.
    • Add alt prop to default app icon, used for the <AppHeader /> simplest version.
  • preview-tables:
    • Make resizing columns work with column actions.
    • DataTable - vertical dividers are not aligned with horizontal scroll.
    • Expanded rows now collapse if data for table changes.
    • DataTable - TableVisualLookConfig - Nested header resizing.

Breaking Changes​

  • preview-charts: The color is no longer part of the data. In order to override a series color please migrate the code to the new slotting approach (more details in the doc).

  • preview-charts: The content of the suffix prop will be migrated to the label or formatterOptions prop if possible, otherwise removed completely.

0.90.0 (2023-02-27)​

Features​

  • preview-charts:
    • Introduced track label functionality to AnnotationsChart.
    • Added markers interactions to TimeseriesChart.
    • Implemented scroll for annotations with more than 3 tracks.
    • Apply annotation track symbol and color props to markers.
    • Filter annotations out of bounds for TimeseriesChart Annotations.
    • Removed outer circle from markers in AnnotationsCharts.
    • Make hidden prop work for track and for marker.
    • Remove opacity from marker border when they overlap.
    • Support custom tooltip actions for annotations.
    • Created Track and Marker slots for Annotations.
    • Added tooltip hover interaction.
    • Added Tooltips for AnnotationsChart.
    • Created annotations slot configuration.
    • Moved AnnotationsChart to preview package.
    • Created threshold indicator component.
    • Fixed categorical bar chart not displaying correctly non-homogeneous data.
  • preview-forms:
    • Update onChange signature for forms components.
  • preview-layouts:
    • Add AppHeader compound components to configure the app name and icon.
    • Make AppHeader NavItems polymorphic to remove the react-router-dom dependency. BREAKING-CHANGE
  • preview-tables:
    • Implement user actions for column groups.

Bug Fixes​

  • preview-charts:
    • Fixed CategoricalBarChart color overrides not working.
    • Fixed CategoricalBarChart displaying wrong unit, when different units are passed.
    • Fixed y-axis ticks on logarithmic scale.
    • Highlighted group items in the annotations tooltip.
    • Tooltip doesn't unpin and eventually doesn't show at all.
    • Tooltip trigger area is not on the whole marker when at the end of a track.
    • Fixed chart crashing on annotations bottom border hover.
    • Fixed overlay mouseposition with overflow.
    • Add missing overlay padding to AnnotationsChart in Timeseries.
    • Fixed tooltip disappearing on hover over it.
    • Unit in right axis accepts undefined value.
    • Fixed pointsDisplay plot override.
    • Fixed LineChart bad performance.
  • preview-core:
    • Fixed ProgressBar text reflow on condensed density variants.
  • preview-forms:
    • Fix clearing the select filter value on close.
  • preview-notifications:
    • ToastContainer is now a singleton component.
  • preview-overlays:
    • Fix sheet content container height.
  • preview-tables:
    • DataTable visual look bugs found by UX.

Refactors​

  • Removed overlay from annotation tooltip implementation.

Breaking Changes​

  • preview-forms: DatePicker onChange 'value' parameter type was renamed from DatePickerChangeEvent to DatePickerValue. TimeframeSelector onChange signature changed to object containing the 'from' string, 'to' string, and 'details' object, so the usage needs to be updated from onChange={(value, details) => { setValue(value); setDetails(details); } to onChange={(timeframe: Required<Timeframe>) => { setValue(timeframe); setDetails(timeframe?.details ?? null); }.

0.89.0 (2023-02-20)​

Features​

Package was renamed to @dynatrace/strato-components-preview

Still have questions?
Find answers in the Dynatrace Community