# components ## 3.12.1 ### Updates #### Forms - Fixed a missing `getServerSnapshot` argument in `useFormRuntimeRegistration` that caused server-side builds to fail. ## 3.12.0 ### Dependency updates - Removed `react-is` as a peer dependency. (APPDEV-19603) - `@dynatrace/strato-icons` was updated to version `2.5.0`. ### Deprecations #### Hint - Hint component is deprecated in favor of `FormFieldMessages`. (APPDEV-18361) ### Updates #### Charts - `Charts` now accept `aria-label`, `aria-labelledby`, `aria-describedby`, and `aria-details` props, allowing you to provide meaningful accessible names for screen readers. (APPDEV-18646) - Fixed the negative plot size that charts with a legend were given when the container was too small to fit the legend and its resizer. (APPDEV-19481) - The chart legend now announces series visibility changes and copy actions to screen readers using an ARIA live region, so users relying on assistive technologies are informed when a series is hidden or shown, and when a series name is copied. (APPDEV-18621) - The legend resizer in `TimeseriesChart` and `TreeMap` no longer snaps back to its original position after the user drags it and the chart container resizes. (APPDEV-19403) - The legend hide/show button and series actions button now have descriptive accessible names that include the series name, fixing an accessibility violation where screen readers announced only "Hide" or an unlabeled button. (APPDEV-19188) #### Editors - Fixed the issue that left the active line indication on the wrong line, or missing from the gutter, after folding or unfolding code. (APPDEV-19016) - The validation error state now keeps the regular text and syntax highlighting colors instead of turning plain text critical. - In the validation error state, the line number and fold marker are now marked for only those lines that carry an error. - The active line indication now continues across the gutter. (APPDEV-19016) #### Layouts - Fixed the horizontal scrollbar that appeared when `PageLayout.Details` was collapsed, or rendered as an overlay or drawer. The panel now takes up no space in those layouts. (APPDEV-19351) #### Overlays - Fixed focus being lost to `` when users Tab past the last (or Shift+Tab past the first) focusable element inside an overlay — focus now returns to the trigger. (APPDEV-19359) - The `Drawer` now uses proper dialog semantics (`role="dialog"` and `aria-modal`) so screen readers correctly identify it as a dialog. You can now provide an accessible name via `aria-label` or `aria-labelledby`. (APPDEV-18623) #### Accordion - `Accordion.SectionLabel` now accepts an `aria-label` prop to override the accessible name derived from its content. (APPDEV-19171) #### AnnotationsChart - Annotation tooltips no longer stay pinned when clicking elsewhere in the chart. Clicking a different annotation marker while one is already pinned now switches the pin to the new annotation. (APPDEV-18988) #### Checkbox - No longer sets the `aria-checked` attribute on the underlying `input[type=checkbox]`. #### CodeSnippet - Fixed a crash when copying code in environments that block clipboard access, such as embedded pages. (APPDEV-19495) - Fixed function names with trailing digits being incorrectly highlighted as number literals when rendering DQL syntax. (APPDEV-19541) #### DataTable - The column settings toolbar button no longer shows a wrong hidden column count when `defaultColumnVisibility` contains an invalid column ID. (APPDEV-19392) - Interactive row triggers now expose their activated state and role description to assistive technologies via `aria-selected` and `aria-roledescription`. Column and cell action menu triggers now correctly report `aria-expanded="false"` when the menu is closed. (APPDEV-19180) - Header column-action triggers are now keyboard-accessible: they display a visible focus ring and can be reached by tabbing. (APPDEV-18611) - Improved the clarity and tone of column settings messages and tooltips. (APPDEV-18738) - Selected row count is now announced to screen readers after the selection changes. (APPDEV-19167) #### Divider - You can now hide a decorative `Divider` from screen readers by setting `aria-hidden`. (APPDEV-18629) #### DQLEditor - Added `showLintGutter` prop to show per-line severity markers in a gutter column. (APPDEV-17073) - Fixed the autocomplete section header incorrectly appearing at the second position instead of the top when navigating to a paginated suggestions page. (APPDEV-19531) - Improved the autocomplete suggestion tooltip layout and content. (APPDEV-17385) - Fixed function names with trailing digits being incorrectly highlighted as number literals in the autocomplete info popup synopsis. (APPDEV-19541) - Fixed the autocomplete popup leaving extra space below informational text when no suggestions are available. (APPDEV-19536) #### ExternalLink - You can now set the `role` prop on `ExternalLink`. #### FilterField - The link to the documentation in the suggestions footer is now reachable and selectable via arrow key navigation. Screen readers now also announce that pressing `Enter` applies the filter when no suggestion is focused. (APPDEV-19131, APPDEV-19125) - Selecting a comparison operator suggestion via keyboard no longer duplicates the operator when the user has already typed the same operator character. (APPDEV-19229) - Fixed the filter field value not being announced by screen readers when it changes dynamically. (APPDEV-19164) #### FocusScope - Focus is now correctly returned to the modal scope when a closing Radix menu asynchronously restores focus to an element in the inert background. (APPDEV-19146) - `Tab` and `Shift+Tab` now cycle within a contained focus scope instead of escaping to content behind the modal (for example, elements in a parent iframe). (APPDEV-18652) #### FormField - Fixed the `aria-describedby` attribute on form controls from incorrectly referencing IDs of error message elements that are not yet rendered in the DOM. (APPDEV-19407) #### HistogramChart - Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. (APPDEV-18988) #### HoneycombChart - Fixed the missing `aria-describedby` attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971) #### IntentButton - Fixed `aria-label`, `aria-labelledby`, `aria-describedby`, and `aria-details` not reaching the interactive element. (APPDEV-19384) #### Menu - Disabled `Menu.Item` elements are no longer reachable via keyboard navigation. (APPDEV-18649) - The `Menu.Trigger` now sets `aria-controls` referencing the open menu content, allowing screen readers to announce the expanded state correctly. (APPDEV-19170) #### MessageContainer - Status and error messages are now announced by screen readers without requiring focus. (APPDEV-18622) #### Modal - Fixed an issue where it sometimes took the modal several seconds to become visible in Chrome when running inside an iframe. (APPDEV-19352) #### SegmentSelector - Fixed inline error not being associated with both select triggers via `aria-describedby` when a segment is missing required variables. (APPDEV-19001) - You can now listen for `onFocus` and `onBlur` events at the whole-component boundary. `onBlur` is not emitted when focus moves between the trigger and the overlay. (APPDEV-17914) - Pin, unpin, and remove buttons for segment presets now have a unique accessible name that includes the preset's name, so screen reader users can tell them apart. (APPDEV-19193) #### Select - Screen readers now announce the number of matching options when using `Select.Filter` to search the content. (APPDEV-18616) - Fixed the inline clear-search (X) button inside the `Select` filter so it is now reachable and operable with the keyboard alone. (APPDEV-18640) - The "Select all" control now exposes its selected state to assistive technologies, correctly announcing when all, some, or none of the options are selected. (APPDEV-18619) #### TimeframeSelector - Fixed the input resetting when typing a date on React 18 apps. (APPDEV-19509) - Fixed the `TimeframeSelector` trigger button missing a descriptive accessible name, causing screen readers to announce only the currently selected value. (APPDEV-19189) - You can now listen for `onFocus` and `onBlur` events at the whole-component boundary. `onBlur` is not emitted when focus moves between the trigger and the overlay. (APPDEV-17914) #### TimeseriesChart - Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. (APPDEV-18988) #### TitleBar - The decorative divider is no longer announced by screen readers. (APPDEV-19139) #### TopList - Fixed the drag-to-select gesture being available in the chart. (APPDEV-19065) - The downloaded CSV now contains Label and Value columns. (APPDEV-19235) - `TopList` no longer shows crosshair nor magnifier. (APPDEV-19228) #### TreeMap - Fixed the missing `aria-describedby` attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971) #### XYChart - `XYChart.Select` now accepts a `disabled` prop that suppresses drag-to-select entirely. (APPDEV-19065) - Fixed the shared tooltip highlighting the wrong bar in grouped bar charts when hovering near a cluster. (APPDEV-19103) - Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. Clicking a different annotation marker while one is already pinned now switches the pin to the new annotation. Legend filtering and toolbar interactions now also dismiss any pinned annotation tooltip. (APPDEV-18988) - Fixed stacked `AreaSeries` incorrectly snapping zero-value datapoints to the chart baseline instead of resting on top of the accumulated stack. (APPDEV-19590) - Fixed bar labels in reversed `XYChart.BarSeries` charts rendering at the wrong position after zooming. (APPDEV-19073) - Fixed the missing `aria-describedby` attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971) - Fixed stacked `AreaSeries` zero-value datapoints becoming invisible and undetectable by hover or selection when all series share a zero value at a given timestamp in a chart with relative value representation. (APPDEV-19590) - Fixed the shared tooltip not adapting its width to the series value text, causing values to be clipped when they were wider than the series names. (APPDEV-19590) - The crosshair line and magnifiers can now be suppressed per axis orientation using the new `hideCrosshair` prop on `XYChart.XAxis` and `XYChart.YAxis`. (APPDEV-19228) - Fixed `BarSeries` labels rendering bolder and washed-out on Windows. (APPDEV-19526) - Fixed the single tooltip grouping stacked `AreaSeries` datapoints that share the same raw value but are at different visual positions due to stacking accumulation. (APPDEV-19590) ## 3.11.2 ### Dependency updates - Removed `react-is` as a peer dependency. (APPDEV-19603) ## 3.11.1 ### Updates #### TimeframeSelector - Fixed the input resetting when typing a date on React 18 apps. (APPDEV-19509) ## 3.11.0 ### Dependency updates - `@dynatrace/strato-design-tokens` was updated to version `1.6.0`. ### Deprecations #### CodeEditor - Deprecated `gutterConfiguration` prop. Use the `diagnostics` and `showLintGutter` props for per-line validation markers instead. (APPDEV-17071) #### DataTable - The per-threshold `showIndicator` option in the `meterbar` column config has been deprecated. Use `showThresholdIndicators` instead. Until it is removed, existing per-threshold `showIndicator` flags are collapsed into the column-level flag as a fallback when `showThresholdIndicators` isn't set. All `true` shows all indicators; all `false` hides them; mixed values log a warning. (APPDEV-17783) #### MeterBarChart - The `showIndicator` prop on `MeterBarChart.ThresholdIndicator` has been deprecated. Use the chart-level `showThresholdIndicators` prop instead. Until it is removed, existing per-threshold `showIndicator` flags are collapsed into the chart-level prop as a fallback when `showThresholdIndicators` is not set. All `true` shows all indicators; all `false` hides them; mixed values log a warning. (APPDEV-17783) ### Updates #### General - Overlays such as `Tooltip`, `Menu` item tooltips, `Select` and `FilterField` suggestion lists, `FeatureHighlight`, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359) #### Charts - GaugeChart now accepts a top-level `showThresholdIndicators` prop to toggle the visibility of all threshold indicators at once (defaults to `true`). The `showIndicator` prop on `GaugeChart.ThresholdIndicator` remains deprecated in favor of it. (APPDEV-18834) - The tooltip no longer briefly flashes at the viewport origin on first display. (APPDEV-19045) - Fixed a bug where the `GaugeChart` threshold interval bar disappeared when two `ThresholdIndicator` elements had the same or very close values. (APPDEV-19230) - Fixed chart tooltip symbol alignment when using `SeriesItem` description prop. The symbol is now always aligned to the top. (APPDEV-19225) - Fixed an issue where charts displayed incorrect colors after switching between light and dark themes. (APPDEV-18752) - Fixed the invalid `role="presentation"` and `aria-label` on the chart interactions overlay, which caused screen readers to announce misleading information. (APPDEV-18639) #### Editors - Aligned the inline-diagnostics hover tooltip styling with the `FilterField` diagnostic tooltip. Each severity now shows a leading icon (`error`, `warning`, `info`). (APPDEV-18787) #### Layouts - Fixed `PageLayout.Details` ignoring `maxWidth` in the overlay layout, so dragging the panel now stops at the configured `maxWidth`. The `maxWidth` is unset by default. In the split layout, the details panel is kept to roughly half the width by the content panel. In the overlay layout, the panel is bounded by the container. (APPDEV-18910) #### Typography - You can now set the `id` prop on `Blockquote`, `Code`, `Emphasis`, `ExternalLink`, `Highlight`, `List`, `Strikethrough`, and `Strong`. #### Accordion - `Accordion.Section` content with `keepMounted` is now automatically hidden from assistive technology when collapsed. (APPDEV-19165) #### CodeEditor - Fold gutter markers are no longer announced by screen readers during virtual cursor navigation. Folding remains operable via keyboard shortcuts. (APPDEV-18645) - Added `showLintGutter` prop to show per-line severity markers in a gutter column. (APPDEV-17071) #### DataTable - Added a `showThresholdIndicators` option to the `meterbar` column config to toggle all threshold indicators at once (visible by default). (APPDEV-17783) - Fixed columns incorrectly showing as "Hidden" in the column settings when opened while columns were still loading. (APPDEV-19382) - Column action trigger buttons no longer share an identical accessible name. Each button now includes the column name, so screen readers can distinguish between them. (APPDEV-18617) - The outer wrapper no longer causes an `aria-prohibited-attr` axe accessibility violation. (APPDEV-18944) - The "Download CSV" menu options are now programmatically associated with their labels, and the toolbar's download/actions menu trigger now exposes its expanded state to assistive technologies. (APPDEV-19172) - The built-in column headers for drag-and-drop row ordering, row selection, expandable rows, and row actions now have accessible names. (APPDEV-18631) - Improved rendering performance by ensuring only affected table components re-render after internal state changes. (APPDEV-18255) - A table with column ordering enabled no longer causes an `aria-required-children` accessibility violation when rendered with no data rows. (APPDEV-19287) - Screen readers now announce the number of matching columns when searching in the column settings modal. (APPDEV-19199) #### DateTimePicker - Fixed a race condition where rapid ArrowUp/ArrowDown presses caused the displayed value to flicker. (APPDEV-18555) - Fixed the calendar button from showing hover styles when `DateTimePicker` is disabled. (APPDEV-18548) - Improved min/max boundary hint and error messages, and added dedicated messages for "Now" boundaries. (APPDEV-18457) - You can now use `onFocus` and `onBlur` props on `DateTimePicker`; both fire at the whole-component boundary so opening and closing the calendar overlay does not produce spurious blur or focus events. (APPDEV-17911) #### DQLEditor - Autocomplete suggestion labels are now truncated with a middle ellipsis that adapts to the available space — longer type labels reduce the suggestion threshold so labels no longer wrap or overflow the panel. (APPDEV-17383) - Added token type display next to each suggestion in the autocomplete panel. (APPDEV-17383) - The autocomplete suggestion description no longer shows internal placeholder text for value suggestions. (APPDEV-19072) #### FilterBar - Fixed `FilterBar.ResetButton` not having a valid accessible name when the tooltip was closed because `aria-labelledby` referenced an element that was not yet in the DOM. (APPDEV-18942) #### FilterField - You can now use `onFocus` and `onBlur` props on `FilterField`; both fire at the whole-component boundary so moving focus between the editor, clear/pin buttons, and suggestions does not produce spurious blur or focus events. (APPDEV-17913) - Added utilities to convert the syntax tree into DQL. `convertFilterFieldTreeToDql` returns a ready-to-use `| filter … | search …` statement, and `enrichFilterFieldTreeWithDql` returns the tree with a `filterDql` fragment on every node, plus a `searchDql` term on every group. Both accept a `keyMap` for renaming keys and an `overrides` callback for full, per-statement control. The `escapeDqlIdentifier` / `escapeDqlStringLiteral` helpers are exposed for use inside overrides. (APPDEV-18385) - Empty values are not saved as recent filters. (APPDEV-19354) - Fixed the duplicate `*` that was appended outside the closing quote when selecting a "starts with" suggestion for a quoted value that already ends with `*`. (APPDEV-19227) - Fixed the grammar from treating `,`, `:`, `[`, and ` - Fixed the cursor jumping to a wrong position while typing in a controlled `FilterField`. (APPDEV-19263) - Fixed the random spacing between suggestions that appeared when many suggestions were listed. (APPDEV-19236) #### HistogramChart - Simplified the `toolbar` so that it only shows one button when interactions are disabled. (APPDEV-18812) #### HoneycombChart - Updated the documentation to present the unified `ChartData` format as the primary API. It includes numerical and categorical `ChartData` examples, a new "Data accessors" section documenting `valueAccessor` (default `"value"`), and `colorPalette` replacing `colorScheme` across examples. Expanded the component TSDoc accordingly. Custom `ColoredRange` coloring remains documented via the deprecated `colorScheme` prop. (APPDEV-18735) #### InputGroup - Improved zIndex prioritization of bordering fields within the group. (APPDEV-17761) #### KeyboardShortcut - Fixed platform-specific key labels. (APPDEV-18437) #### Menu - `Menu.Item` and `Menu.Link` no longer cause a React console warning when `textValue` is passed. (APPDEV-18440) #### MeterBarChart - Replaced threshold marker lines with internal threshold interval bars rendered below the meter bar. (APPDEV-17783) - `MeterBarChart` now accepts `aria-label`, `aria-labelledby`, `aria-describedby`, and `aria-details` props, allowing you to provide sufficiently descriptive accessible names and descriptions for screen readers (WCAG 2.1 SC 1.1.1). The inner SVG plot element is now `aria-hidden="true"` to prevent redundant announcements inside the chart's `role="img"` container. If you rely on CSS selectors targeting `svg[aria-label="Chart Plot Area" #### MultiMeterBarChart - `MultiMeterBarChart` now accepts `aria-label`, `aria-labelledby`, `aria-describedby`, and `aria-details` props, allowing you to provide sufficiently descriptive accessible names and descriptions for screen readers (WCAG 2.1 SC 1.1.1). (APPDEV-19124) #### SearchInput - The built-in clear button now exposes an accessible name, so assistive technologies announce its purpose. (APPDEV-18637) #### SegmentSelector - Segment definitions are now refreshed in the background when the overlay is opened, ensuring variable query freshness after cross-tab changes. (APPDEV-16585) - Segment presets that contain unavailable segments now show a "Remove" button instead of the pin/unpin button, allowing you to clean up broken presets. (APPDEV-18342) - Now gives users better guidance in case of unavailable variables. (APPDEV-15882) #### Select - Fixed the native browser validation popup from appearing on required `Select` fields. (APPDEV-19286) - Added `onFocus` prop. It only fires when focus enters the component from outside, not on internal transitions. (APPDEV-17910) - Fixed the random spacing between options that appeared when many options were listed. (APPDEV-19236) #### Sheet - The `title` prop now accepts a `ReactElement` in addition to a `string`. (APPDEV-18664) #### TextInput - Fixed the `TextInput.Button` accessibility issue where `aria-labelledby` pointed to a non-existent element ID when the tooltip was not visible and silently overrode a consumer-supplied `aria-label`. (APPDEV-18942) #### TimeframeSelector - Fixed the boundary hint shown with a blank date value when an invalid date expression was passed as the `min` or `max` prop. (APPDEV-19284) - Improved min/max boundary hint and error messages, and added dedicated messages for "Now" boundaries. (APPDEV-18457) - Fixed `TimeframeSelector.PresetItem` setting `aria-describedby` to a non-existent element when the tooltip was closed. (APPDEV-18942) #### TimeseriesChart - Fixed the `curve` prop from not being applied to line and area series. (APPDEV-19197) - Simplified the `toolbar` so it only shows one button when interactions are disabled. (APPDEV-18812) #### TopList - Added `actions` prop to `TopList`, allowing you to provide a context menu for each bar. The `TopListActionItem` type is exported for use with the callback. (APPDEV-19062) - Bars with zero or near-zero values can now be hovered. (APPDEV-18759) - Now supports `colorPaletteMode` prop. (APPDEV-18752) #### XYChart - Bars with zero or near-zero values can now be hovered. (APPDEV-18759) - Pressing `Escape` with a series action menu open now correctly clears the series highlight after dismissing the tooltip. - Fixed the legend size from getting stuck on a stale measurement when the chart is rendered inside a frequently re-rendering parent. (APPDEV-18842) - Fixed the `colorRule` `colorPalette` on `BarSeries` from resolving to the palette's first color for every matching bar instead of the color matching the series' own index. (APPDEV-19198) - Simplified the `toolbar` so it only shows one button when interactions are disabled. (APPDEV-18812) ## 3.10.5 ### Updates #### General - Overlays such as `Tooltip`, `Menu` item tooltips, `Select` and `FilterField` suggestion lists, `FeatureHighlight`, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359) ## 3.10.4 ### Updates #### Select - Fixed the native browser validation popup appearing on required `Select` fields. (APPDEV-19286) ## 3.10.3 ### Updates #### Charts - The tooltip no longer briefly flashes at the viewport origin on first display. (APPDEV-19045) #### XYChart - Pressing Escape with a series action menu open now correctly clears the series highlight after dismissing the tooltip. ## 3.10.2 ### Updates #### Forms - Fixed the `FormFieldMessages` container remaining visible when a render function passed as `children` returns `null` or `undefined`. (APPDEV-19212) ## 3.10.1 ### Updates #### TextArea - Fixed an issue where the `name` prop was not forwarded to the underlying `