@dynatrace/strato-components 3.13.3 → 3.14.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # components
 
-## 3.13.3
+## 3.14.1
 
 ### Updates
 
@@ -8,6 +8,293 @@
 
 - Fixed the `seriesActions` callback receiving data from the wrong series when 10 or more series were present. (APPDEV-20030)
 
+## 3.14.0
+
+### Dependency updates
+
+- `@dynatrace/strato-design-tokens` was updated to version `1.7.1`.
+- `@dynatrace/strato-icons` was updated to version `2.6.1`.
+
+### Updates
+
+#### General
+
+- Fixed a `SyntaxError: Unexpected token 'export'` that occurred when consuming packages in vitest with `pool: vmThreads` by emitting an `esm/package.json` marker that correctly identifies the ESM output subtree as ES Module. (APPDEV-19866)
+
+#### Charts
+
+- Scrolling with the mouse wheel now pans in pan mode and zooms in zoom mode without needing to hold a modifier key. (APPDEV-19612)
+- Fixed the legend text label button's clickable area to meet the WCAG 2.5.8 minimum target size of 24px. (APPDEV-19819)
+- Added touch device support for chart tooltip interactions. (APPDEV-19792)
+- The tooltip footer placeholder now reads "Click to access actions" instead of "Pin to access actions", includes a cursor icon, and appears with a shorter animation delay. (APPDEV-19665)
+
+#### Core
+
+- Fixed a crash when importing components in a Node.js context, such as SSR or config bundling, where `window` is unavailable. (APPDEV-19999)
+
+#### Editors
+
+- Fixed the text highlight animation playing when `prefers-reduced-motion: reduce` is active. (APPDEV-19890)
+- Fixed off-screen error indicator pill animations to properly honor the `prefers-reduced-motion` user preference. (APPDEV-19889)
+
+#### Filters
+
+- Form controls using the legacy `controlState` prop are no longer affected by unrelated `FormFieldMessages` validation state in the same field. (APPDEV-19357)
+
+#### Forms
+
+- Form controls using the legacy `controlState` prop are no longer affected by unrelated `FormFieldMessages` validation state in the same field. (APPDEV-19357)
+- Fixed `onValidityChange` being called while `controlState` is set. (APPDEV-19357)
+
+#### Layouts
+
+- Fixed `defaultWidth` on the sidebar and details panels so that it is read once when the panel mounts, matching the React `defaultValue` convention. (APPDEV-19606)
+- Fixed the `aria-label` and `aria-labelledby` props on the `PageLayout` panel slots, which were overridden by the built-in panel labels. (APPDEV-19606)
+- Fixed the `PageLayout` sidebar turning into an open drawer over the content, and `onBreakpointTransition` not firing, when the `breakpoint` prop changed while the container stayed the same size. (APPDEV-19606)
+- Fixed the `label` prop on `PageLayout.Details`, which did not name the resize separator. (APPDEV-19606)
+- Fixed the issue that reset the main content's scroll position when a sidebar or details panel was added or removed. A panel replaced with a new `key` now starts from its own `defaultCollapsed` and `defaultLayout` rather than inheriting the previous panel's state. (APPDEV-19606)
+- Fixed the resizable sidebar and details panels stopping 8px short of the width the layout allows when the visual refresh is enabled, where the resize handle takes no space between the columns. (APPDEV-19606)
+- Fixed the layout height so it now accounts for dynamic browser UI on mobile viewports. (APPDEV-19606)
+- Fixed the loss of the details panel's own scroll position when it was collapsed and expanded, or switched between the side-by-side and overlay layouts. (APPDEV-19606)
+
+#### Overlays
+
+- Fixed the issue that left keyboard focus outside a dialog that was opened from a `Menu.Item`. (APPDEV-19146)
+
+#### Accordion
+
+- The content region now has a correct accessible name derived directly from `Accordion.SectionLabel`, fixing an issue where screen readers could not announce the section name. (APPDEV-19707)
+
+#### AiLoadingIndicator
+
+- Fixed the label gradient animation playing when `prefers-reduced-motion` is set to `reduce`. (APPDEV-19902)
+
+#### AiResponse
+
+- You can now render the content of a fenced code block as a component with the `customCodeBlockRenderers` prop. (DI-30803)
+
+<details>
+<summary>How to opt in</summary>
+
+`customCodeBlockRenderers` maps a fence language to the component that renders blocks of that language, which lets a response carry a payload that is displayed as a component instead of as code. Blocks with any other language, and inline code, keep their default rendering.
+
+The renderer receives the `code` of the block, its `language`, and `isComplete`. Content is revealed word by word, so a code block is rendered long before its content is complete. `isComplete` reports whether the closing fence of the block has arrived, which lets you show a placeholder until then.
+
+```tsx
+import {
+  AiResponse,
+  type AiResponseCodeBlockProps,
+  Skeleton,
+} from '@dynatrace/strato-components/content';
+
+const Visualization = ({ code, isComplete }: AiResponseCodeBlockProps) => {
+  if (!isComplete) {
+    return <Skeleton height={300} />;
+  }
+  return <DonutChart {...JSON.parse(code)} />;
+};
+
+const renderers = { 'dt-visualization': Visualization };
+
+const Chat = ({ response }) => (
+  <AiResponse customCodeBlockRenderers={renderers}>{response}</AiResponse>
+);
+```
+
+</details>
+
+#### AppHeader
+
+- Fixed the `AppIcon` fade-in animation playing when `prefers-reduced-motion` is active. (APPDEV-19887)
+
+#### Avatar
+
+- Fixed the disabled `Avatar`'s grey background circle from potentially detaching from its avatar when rendered in a scrollable container or at high browser zoom. (APPDEV-18950)
+
+#### AvatarGroup
+
+- The "+N" overflow trigger now uses `InlineButton`: it renders as plain underlined text instead of a filled, pill-shaped button. (APPDEV-18950)
+
+#### ChipGroup
+
+- The "Show more" / "Show less" trigger now uses `InlineButton`: its height is content-sized. While loading, the trigger now correctly blocks clicks and sets `aria-busy`/`aria-disabled`. (APPDEV-18948)
+
+#### CodeEditor
+
+- You can now subscribe to validation state changes via `onValidityChange` and trigger validation programmatically via `editorRef.current.validate()`. (APPDEV-18656)
+
+<details>
+<summary>Usage example</summary>
+
+```tsx
+import { useRef, useState } from 'react';
+import {
+  CodeEditor,
+  type CodeEditorRef,
+} from '@dynatrace/strato-components/editors';
+import {
+  FormField,
+  FormFieldMessages,
+  Label,
+} from '@dynatrace/strato-components/forms';
+import type { ValidationState } from '@dynatrace/strato-components/forms';
+
+const MyEditor = () => {
+  const editorRef = useRef<CodeEditorRef>(null);
+  const [state, setState] = useState<ValidationState>();
+
+  return (
+    <FormField>
+      <Label>JSON configuration</Label>
+      <CodeEditor
+        ref={editorRef}
+        name="config"
+        language="json"
+        required
+        onValidityChange={setState}
+      />
+      <FormFieldMessages />
+    </FormField>
+  );
+};
+```
+
+</details>
+
+#### DataTable
+
+- Fixed a rare invalid index console warning when data shrinks to fewer rows with certain other conditions. (APPDEV-19714)
+- Rows no longer keep their previous height when line wrapping is toggled while they are scrolled out of view. (APPDEV-19714)
+- Fixed the page crashing when downloading large datasets with many hidden columns. (APPDEV-13732)
+
+#### DQLEditor
+
+- Introduced the new `showOffScreenDiagnosticIndicators` prop that renders floating pill buttons at the top and bottom edges of the editor indicating off-screen `error`-severity validation problems, each showing the count of off-screen errors. Clicking a pill scrolls the nearest such error into view. (APPDEV-17075)
+
+#### ExpandableText
+
+- The "Show more" / "Show less" trigger now uses `InlineButton`: it has a visible keyboard focus indicator, and its underline offset scales with the font size. (APPDEV-18949)
+
+#### FilterField
+
+- Fixed the "not supported" hint message for `not-starts-with`, `not-ends-with`, `not-contains`, and `not-matches-wildcard` wildcard operators — they previously showed the hint for their positive counterpart (e.g. "Starts-with is not supported") instead of the correct negated operator name. (APPDEV-19904)
+- Fixed app state API requests being made when `filterNamespace` is not set. (APPDEV-19810)
+- `addFilter` and `removeFilter` now accept an optional `valueType` on the filter statement to control how the value is typed rather than inferring it from the value. `removeFilter` also supports key-only statements — omit `value` and `comparisonOperator` to target every statement for a key regardless of operator or value — and a `parserConfig` option for symmetric parsing with `addFilter`. (APPDEV-19753)
+- Fixed the error that occurred when stale editor ranges were applied after the controlled filter value changed. (APPDEV-19425)
+- Fixed `onValidityChange` being called while `controlState` is set. (APPDEV-19357)
+
+#### HelpMenu
+
+- Added `'default'` option to the `feedback` prop, which calls the `post_feedback_add_on_intent` intent. (APPDEV-19670)
+
+#### HistogramChart
+
+- Fixed chart toolbar keyboard accessibility: the download button is now reachable via Tab when zoom and pan are disabled, and the intents menu now opens when pressing Enter on its trigger button. (APPDEV-19328)
+
+#### InformationOverlay
+
+- Fixed the overlay content being cut off or hidden at narrow viewport widths. (APPDEV-18609)
+- The trigger now renders as an `InlineButton`, with its hover, open-state, and focus ring styling. (APPDEV-18447)
+
+#### InlineButton
+
+- Fixed the focus ring appearing on mouse clicks. Fixed the vertical padding overflowing the line height when rendered inside a heading. Fixed the keyboard focus ring rendering as a heavier two-tone ring instead of the thinner single ring used by other inline, text-flowing components.
+
+#### Menu
+
+- Fixed the trigger button missing explicit `aria-haspopup="menu"` and `aria-expanded` attributes, which prevented screen readers from correctly announcing the expanded/collapsed state. (APPDEV-19175)
+- Fixed the group divider lines not being rendered between `Menu.Group` blocks in mobile mode (viewport ≤ 480 px). (APPDEV-19585)
+- Fixed the slide-in animation in the mobile menu still playing when `prefers-reduced-motion` is set to `reduce`. (APPDEV-19885)
+- Fixed the dropdown content being cut off at narrow viewport widths, which caused horizontal scrolling and violated WCAG 1.4.10 (reflow). (APPDEV-19215)
+
+#### Page
+
+- Fixed the sidebar and details panels not being exposed as landmark regions to assistive technologies when rendered in split mode. (APPDEV-19221)
+
+#### ProgressBar
+
+- Fixed the indeterminate animation playing when `prefers-reduced-motion: reduce` is active. (APPDEV-19883)
+
+#### ProgressCircle
+
+- Fixed the indeterminate spinning animation and determinate arc transition playing regardless of the user's reduced-motion preference. (APPDEV-19884)
+
+#### Radio
+
+- Fixed `aria-describedby` and `aria-errormessage` not matching a consumer-authored error message's `id` when the message wasn't associated with a specific form control. (APPDEV-19357)
+
+#### SegmentSelector
+
+- The trigger's chevron icon now rotates to point up while the overlay is open and back down when it closes, matching the expand/collapse affordance of other selectors such as the `TimeframeSelector`. (PAPA-36178)
+
+#### Select
+
+- Fixed the loading state not being announced to screen readers when the dropdown is open. (APPDEV-19524)
+
+#### TerminologyOverlay
+
+- The trigger now uses `InlineButton`: it has a visible keyboard focus indicator, dashed underline offset and thickness scale with the font size. (APPDEV-18448)
+
+#### TimeframeSelector
+
+- Fixed `onValidityChange` being called while `controlState` is set. (APPDEV-19357)
+
+#### TimeseriesChart
+
+- Fixed chart toolbar keyboard accessibility: the download button now receives Tab focus correctly when no intents are configured. (APPDEV-19328)
+- Fixed the crash that occurred when swapping `data` to a different dataset after hiding a series via the legend. (APPDEV-19905)
+- Fixed the bar highlight rectangle overflowing into the lower series when hovering over stacked bars clipped by a custom Y Axis Max. (APPDEV-19660)
+- Annotations now appear in a compact, single-track view when the chart height is between 50px and 160px, instead of being hidden entirely. (APPDEV-19510)
+
+#### TitleBar
+
+- The `Title` subcomponent now accepts `as` and `level` props to control the semantic heading tag and visual heading size. (APPDEV-19207)
+
+<details>
+<summary>How to opt in</summary>
+
+Use `as` to set the HTML heading element that fits your page's document outline, and `level` to adjust the visual heading size. Both default to their previous values (`as="h2"`, `level={3}`), so existing usages are unaffected.
+
+```tsx
+import { TitleBar } from '@dynatrace/strato-components/layouts';
+
+{
+  /* Step the semantic level down when the page already has an h2 */
+}
+<TitleBar>
+  <TitleBar.Title as="h3">Section title</TitleBar.Title>
+</TitleBar>;
+
+{
+  /* Adjust visual weight for a panel or dialog context */
+}
+<TitleBar>
+  <TitleBar.Title level={4} as="h3">
+    Panel title
+  </TitleBar.Title>
+</TitleBar>;
+```
+
+</details>
+
+#### Toast
+
+- Fixed enter and exit animations to properly honor the `prefers-reduced-motion` user preference. (APPDEV-19886)
+
+#### TopList
+
+- Fixed the tooltip showing a different formatted value than the Y-axis tick labels when `valueFormatter` is a `FormatOptions` object. (APPDEV-19803)
+- The toolbar no longer appears. (APPDEV-19809)
+
+#### XYChart
+
+- Fixed the stacking of bar series with millisecond-precision timestamps and no `end` field stacking incorrectly when multiple datapoints fall within the same second on TimeSeries adoption. (APPDEV-19858)
+- Fixed the log x-axis collapsing when zoom or pan produces a domain too narrow for D3 to generate log-scale ticks. (APPDEV-19748)
+- Fixed `ColorRule` not applying to `BarSeries` bars when the series name is an array value and the rule targets the joined form (e.g. `'CPU user•host-a'`). (APPDEV-19824)
+- Fixed chart toolbar keyboard accessibility: toolbar controls are now reachable via Tab when the toolbar is fully collapsed or when interaction controls are hidden, and the intents menu now opens when pressing Enter on its trigger button. (APPDEV-19328)
+- Fixed pan interactions being unavailable when zoom is disabled on a zoomed-in chart. (APPDEV-19782)
+- Annotations now appear in a compact, single-track view when the chart height is between 50px and 160px, instead of being hidden entirely. (APPDEV-19510)
+
 ## 3.13.2
 
 ### Updates
@@ -171,6 +458,14 @@
 - Custom tooltip in XYChart now displays the selected truncation mode. (APPDEV-19728)
 - Fixed "Zoom to selection" becoming non-clickable after pressing Escape on a finished selection and selecting again. (APPDEV-19593)
 
+## 3.12.3
+
+### Updates
+
+#### FilterField
+
+- Fixed app state API requests being made when `filterNamespace` is not set. (APPDEV-19810)
+
 ## 3.12.2
 
 ### Updates

package/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-13-3 {
+._10kgnsa0-3-14-1 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-13-3);
-  box-shadow: var(--_bx32h4-3-13-3);
-  color: var(--_bx32h0-3-13-3);
+  background: var(--_bx32h3-3-14-1);
+  box-shadow: var(--_bx32h4-3-14-1);
+  color: var(--_bx32h0-3-14-1);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-13-3 {
+._10kgnsa1-3-14-1 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-13-3 {
+._10kgnsa2-3-14-1 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-13-3 {
+._10kgnsa3-3-14-1 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-13-3 {
+._10kgnsa4-3-14-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-13-3 {
+._10kgnsa5-3-14-1 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-13-3 {
+._10kgnsa6-3-14-1 {
   width: 100%;
 }
-._10kgnsa7-3-13-3 {
+._10kgnsa7-3-14-1 {
   width: fit-content;
 }
-._10kgnsa8-3-13-3 {
+._10kgnsa8-3-14-1 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-13-3 ._10kgnsa9-3-13-3:not(:has(svg:only-child)) {
+._10kgnsa3-3-14-1 ._10kgnsa9-3-14-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-13-3 ._10kgnsa9-3-13-3:not(:has(svg:only-child)) {
+._10kgnsa4-3-14-1 ._10kgnsa9-3-14-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-13-3 {
+._10kgnsab-3-14-1 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;