@dynatrace/strato-components 3.7.1 → 3.8.0

package/editors/dql-editor/dql/open-autocomplete.js

@@ -23,22 +23,31 @@ __export(open_autocomplete_exports, {
 module.exports = __toCommonJS(open_autocomplete_exports);
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_dql_linter = require("./dql-linter.js");
+const SUBQUERY_PREFIX_LOOKBACK_CHARS = 100;
 function isStartOfCommandOrParameter(context) {
   return context.matchBefore(/[,|]\s+$/) !== null;
 }
 function isTypingCommandPrefixAtCommandBoundary(context) {
   return context.matchBefore(/(?:^|[|,]\s*|\*\/\s*)[A-Za-z][A-Za-z0-9]*$/) !== null;
 }
+function isTypingCommandPrefixAtSubqueryStart(context) {
+  const slice = context.state.doc.sliceString(
+    Math.max(0, context.pos - SUBQUERY_PREFIX_LOOKBACK_CHARS),
+    context.pos
+  );
+  return /\[\s*[A-Za-z]+$/.test(slice);
+}
 function isTypingParameterPrefixAfterCommand(context) {
   const commandAndParameter = context.matchBefore(
     /^[A-Za-z][A-Za-z0-9]*\s+[A-Za-z_][A-Za-z0-9_.]*\s*$/
   );
   return commandAndParameter !== null;
 }
-function isBeforeCommentOrEndOfContent(state) {
+function isAtTokenBoundary(state) {
   const afterCursor = state.doc.slice(state.selection.main.to).toString();
+  const immediateCharacterAfterCursor = afterCursor.slice(0, 1);
   const afterCursorTrimmed = afterCursor.trimStart();
-  return afterCursorTrimmed === "" || afterCursorTrimmed.startsWith("//") || afterCursorTrimmed.startsWith("/*");
+  return immediateCharacterAfterCursor.trim().length === 0 || afterCursorTrimmed.startsWith("//") || afterCursorTrimmed.startsWith("/*");
 }
 async function isInvalidAtEnd(query) {
   const trimmedQuery = query.trimEnd();
@@ -51,7 +60,16 @@ async function isInvalidAtEnd(query) {
 async function openAutocomplete(update, state) {
   const { isTyping, isDeleting, isFocused } = update;
   const context = new import_autocomplete.CompletionContext(state, state.selection.main.to, false);
-  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingParameterPrefixAfterCommand(context)) && isBeforeCommentOrEndOfContent(state)) {
+  if (isDeleting) {
+    const beforeCursor = state.doc.sliceString(
+      Math.max(0, state.selection.main.to - 2),
+      state.selection.main.to
+    );
+    if (/\s\s$/.test(beforeCursor)) {
+      return false;
+    }
+  }
+  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingCommandPrefixAtSubqueryStart(context) || isTypingParameterPrefixAfterCommand(context)) && isAtTokenBoundary(state)) {
     return true;
   }
   if (isFocused && state.doc.toString().trim() === "") {

package/editors/dql-editor/dql/suggestion-autocompletions.js

@@ -164,6 +164,9 @@ const suggestionAutocompletion = async (context) => {
     from: autocompletePos,
     async reopen(completion) {
       const queryToEnd = context.state.doc.slice(context.pos).toString();
+      if (queryToEnd.trim().length > 0) {
+        return false;
+      }
       const completedQuery = autocompleteContent.slice(0, completion.startPos) + completion.suggestion + queryToEnd;
       const { valid = true } = await (0, import_dql_linter.verifyQuery)(completedQuery) ?? {};
       return !valid;

package/editors/index.d.ts

@@ -1,5 +1,5 @@
 export { BaseCodeEditor as _BaseCodeEditor } from './base-code-editor/BaseCodeEditor.js';
-export type { BaseCodeEditorBaseProps as _BaseCodeEditorBaseProps, BaseCodeEditorControlledProps as _BaseCodeEditorControlledProps, BaseCodeEditorProps as _BaseCodeEditorProps, BaseCodeEditorRef as _BaseCodeEditorRef, BaseCodeEditorUncontrolledProps as _BaseCodeEditorUncontrolledProps, } from './base-code-editor/BaseCodeEditor.js';
+export type { BaseCodeEditorBaseProps as _BaseCodeEditorBaseProps, BaseCodeEditorControlledProps as _BaseCodeEditorControlledProps, BaseCodeEditorProps as _BaseCodeEditorProps, BaseCodeEditorRef as _BaseCodeEditorRef, BaseCodeEditorUncontrolledProps as _BaseCodeEditorUncontrolledProps, SharedBaseCodeEditorProps as _SharedBaseCodeEditorProps, } from './base-code-editor/BaseCodeEditor.js';
 export type { AutocompleteProvider as _AutocompleteProvider, AutocompletionResult as _AutocompletionResult, Suggestion as _Suggestion, } from './base-code-editor/auto-completion/autocompletion.extension.js';
 export type { ListAutocompletionConfig as _ListAutocompletionConfig } from './base-code-editor/auto-completion/list/list-autocompletion-types.js';
 export type { AutocompletionOptions as _AutocompletionOptions, EditorLanguageConfiguration as _EditorLanguageConfiguration, } from './base-code-editor/configuration/configuration.js';

package/esm/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-7-1 {
+._10kgnsa0-3-8-0 {
   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-7-1);
-  box-shadow: var(--_bx32h4-3-7-1);
-  color: var(--_bx32h0-3-7-1);
+  background: var(--_bx32h3-3-8-0);
+  box-shadow: var(--_bx32h4-3-8-0);
+  color: var(--_bx32h0-3-8-0);
   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-7-1 {
+._10kgnsa1-3-8-0 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-7-1 {
+._10kgnsa2-3-8-0 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-7-1 {
+._10kgnsa3-3-8-0 {
   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-7-1 {
+._10kgnsa4-3-8-0 {
   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-7-1 {
+._10kgnsa5-3-8-0 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-7-1 {
+._10kgnsa6-3-8-0 {
   width: 100%;
 }
-._10kgnsa7-3-7-1 {
+._10kgnsa7-3-8-0 {
   width: fit-content;
 }
-._10kgnsa8-3-7-1 {
+._10kgnsa8-3-8-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-7-1 ._10kgnsa9-3-7-1:not(:has(svg:only-child)) {
+._10kgnsa3-3-8-0 ._10kgnsa9-3-8-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-7-1 ._10kgnsa9-3-7-1:not(:has(svg:only-child)) {
+._10kgnsa4-3-8-0 ._10kgnsa9-3-8-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-7-1 {
+._10kgnsab-3-8-0 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/esm/buttons/button/Button.js

@@ -100,11 +100,12 @@ const _Button = /* @__PURE__ */ forwardRef(
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       required,
-      disabled: nativeDisabledOrLoading && !ariaDisabled,
+      disabled: disabled && !ariaDisabled,
       id: propId,
       type,
       ...ariaLabelingProps,
-      "aria-disabled": ariaDisabledProp,
+      "aria-disabled": loading ? true : ariaDisabledProp,
+      "aria-busy": loading,
       onClick: handleButtonClick
     };
     const disabledPropagationProps = {
@@ -153,7 +154,7 @@ const _Button = /* @__PURE__ */ forwardRef(
             focusRingStatic({
               when: "focus-visible",
               color,
-              disabled: nativeDisabledOrLoading
+              disabled
             }),
             {
               [`${styles.widths.content}`]: width === "content",
@@ -190,7 +191,7 @@ const _Button = /* @__PURE__ */ forwardRef(
           focusRingStatic({
             when: "focus-visible",
             color,
-            disabled: nativeDisabledOrLoading
+            disabled
           })
         ),
         style: {

package/esm/buttons/button/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/button/Button.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n  Children,\n  type ElementType,\n  forwardRef,\n  type MouseEventHandler,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport * as styles from './Button.sty.js';\nimport { Label } from './Label.js';\nimport { Prefix } from './Prefix.js';\nimport { Suffix } from './Suffix.js';\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport {\n  type AriaDisabledProps,\n  type AriaLabelingProps,\n} from '../../core/types/a11y-props.js';\nimport { type BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { parseBoolean } from '../../core/utils/parse-boolean.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { fieldTokens } from '../../styles/field.sty.js';\n\nconst COMPONENT_NAME = 'Button';\n\n//#region Typings\n\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface ButtonOwnProps\n  extends AriaLabelingProps,\n    AriaDisabledProps,\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * If a button is disabled e.g. it cannot be interacted with.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Different variants have different styles.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'emphasized' | 'accent';\n\n  /**\n   * The HTML button type.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n   * @defaultValue 'button'\n   */\n  type?: 'button' | 'reset' | 'submit';\n\n  /** Called when the button is interacted with. */\n  onClick?: MouseEventHandler;\n\n  /**\n   * The width of the button.\n   * @defaultValue 'content'\n   */\n  width?: 'content' | 'full' | CSS.Property.Width<string & {}>;\n\n  /**\n   * The color of the button. This should be chosen based on the context\n   * the button is used in.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'critical' | 'warning';\n\n  /**\n   * Controls the text alignment inside the button. Only affects the button\n   * if the width is not set to 'content'.\n   * @defaultValue 'center'\n   */\n  textAlign?: 'center' | 'start';\n\n  /**\n   * The size of the button.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n\n  /**\n   * The current loading state of the button. If true, a loading icon is shown and the button is disabled.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type ButtonProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  ButtonOwnProps\n>;\n\ntype ButtonSlots = {\n  label?: ReactNode;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  freeform?: ReactNode[];\n};\n\n//#endregion\n\n/**\n * Iterates over child nodes to extract specific component slots.\n * @public\n */\nexport default function getButtonSlots(children: ReactNode) {\n  const slots: ButtonSlots = {};\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Suffix:\n          slots.suffix = child;\n          break;\n        case Prefix:\n          slots.prefix = child;\n          break;\n        case Label:\n          slots.label = child;\n          break;\n        default:\n          slots.freeform ??= [];\n          slots.freeform.push(child);\n          break;\n      }\n    } else {\n      if (child !== null && child !== undefined) {\n        slots.freeform ??= [];\n        slots.freeform.push(child);\n      }\n    }\n  });\n\n  return slots;\n}\n\nconst _Button: <E extends ElementType = 'button'>(\n  props: ButtonProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(props: ButtonProps<E>, ref: typeof props.ref) => {\n    const {\n      children,\n      variant = 'default',\n      disabled,\n      'aria-disabled': ariaDisabledProp,\n      required,\n      id: propId,\n      type = 'button',\n      onClick,\n      ariaLabel,\n      width = 'content',\n      color = 'neutral',\n      textAlign = 'center',\n      size = 'default',\n      loading = false,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      as,\n      ...remainingProps\n    }: ButtonProps<E> = props;\n    const slots = getButtonSlots(children);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaDisabled = parseBoolean(ariaDisabledProp);\n\n    const nativeDisabledOrLoading = useMemo(\n      () => (loading ? true : disabled),\n      [disabled, loading],\n    );\n    const disabledOrLoading = useMemo(\n      () => nativeDisabledOrLoading || ariaDisabled,\n      [ariaDisabled, nativeDisabledOrLoading],\n    );\n\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n    const handleButtonClick: MouseEventHandler<HTMLElement> = (event) => {\n      if (nativeDisabledOrLoading) {\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      onClick?.(event);\n    };\n\n    const buttonProps = {\n      ref,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      required,\n      disabled: nativeDisabledOrLoading && !ariaDisabled,\n      id: propId,\n      type,\n      ...ariaLabelingProps,\n      'aria-disabled': ariaDisabledProp,\n      onClick: handleButtonClick,\n    };\n\n    // Propagation needs to be disabled on the disabled button because\n    // it would still trigger actions on parents that would listen to it.\n    // For example the menu or the useOverlay hook.\n    const disabledPropagationProps = {\n      onPointerDown(evt: PointerEvent) {\n        if (nativeDisabledOrLoading) {\n          evt.preventDefault();\n          evt.stopPropagation();\n        }\n      },\n      onPointerUp(evt: PointerEvent) {\n        if (nativeDisabledOrLoading) {\n          evt.preventDefault();\n          evt.stopPropagation();\n        }\n      },\n    };\n\n    const hasChildren = children || children === 0;\n\n    const buttonMergedProps = {\n      ...mergeProps(\n        buttonProps,\n        disabledPropagationProps,\n        // Need to cast this one as the inference of mergeProps would generate\n        // a not allowed overlap. The restProps type is too complex due to the\n        // polymorphic inheritance.\n        restProps as Record<string, unknown>,\n        behavioralTrackingProps,\n      ),\n    };\n\n    const intl = useIntl();\n\n    // Make the component polymorphic\n    const Component = as || 'button';\n\n    // Render a void element if no children are set and it's not loading (so self-closing polymorphed tags won't break)\n    if (!hasChildren) {\n      return (\n        <Component\n          data-dt-component={COMPONENT_NAME}\n          {...buttonMergedProps}\n          className={clsx(\n            consumerClassName,\n            'strato-inputgroup',\n            fieldTokens({ variant, color, disabled: disabledOrLoading }),\n            styles.button({\n              disabled: disabledOrLoading,\n              textAlign,\n              size,\n            }),\n            focusRingStatic({\n              when: 'focus-visible',\n              color,\n              disabled: nativeDisabledOrLoading,\n            }),\n            {\n              [`${styles.widths.content}`]: width === 'content',\n              [`${styles.widths.full}`]: width === 'full',\n            },\n          )}\n          style={{\n            width: width !== 'content' && width !== 'full' ? width : undefined,\n          }}\n        />\n      );\n    }\n\n    return (\n      <Component\n        data-dt-component={COMPONENT_NAME}\n        className={clsx(\n          consumerClassName,\n          'strato-inputgroup',\n          fieldTokens({\n            variant,\n            color,\n            disabled: disabledOrLoading || ariaDisabled,\n          }),\n          styles.button({\n            disabled: disabledOrLoading || ariaDisabled,\n            textAlign,\n            size,\n          }),\n          {\n            [`${styles.widths.content}`]: width === 'content',\n            [`${styles.widths.full}`]: width === 'full',\n          },\n          focusRingStatic({\n            when: 'focus-visible',\n            color,\n            disabled: nativeDisabledOrLoading,\n          }),\n        )}\n        style={{\n          width: width !== 'content' && width !== 'full' ? width : undefined,\n          ...consumerStyle,\n        }}\n        {...buttonMergedProps}\n      >\n        {loading && (\n          <div className={styles.loading}>\n            <ProgressCircle\n              size=\"small\"\n              color={color}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'Loading',\n                id: 'cycz+bYG+VH7Of4e',\n                description: 'Label for the loading state.',\n              })}\n            />\n          </div>\n        )}\n        <Grid\n          gap={size === 'default' ? 4 : 2}\n          grid=\"auto / auto-flow auto\"\n          width=\"100%\"\n          maxWidth=\"100%\"\n          alignItems=\"center\"\n          justifyContent={textAlign === 'start' ? 'space-between' : 'center'}\n          style={{\n            visibility: loading ? 'hidden' : undefined,\n          }}\n        >\n          {textAlign === 'start' ? (\n            <Flex minWidth={0} gap={size === 'default' ? 4 : 2}>\n              {slots.prefix}\n              {slots.label}\n              {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n            </Flex>\n          ) : (\n            <>\n              {slots.prefix}\n              {slots.label}\n              {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n            </>\n          )}\n          {slots.suffix}\n        </Grid>\n      </Component>\n    );\n  },\n);\n\n(_Button as typeof _Button & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Buttons let users trigger actions or events\n * with a single click, or by pressing\n * `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const Button = Object.assign(_Button, {\n  Suffix,\n  Prefix,\n  Label,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n  Children,\n  type ElementType,\n  forwardRef,\n  type MouseEventHandler,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport * as styles from './Button.sty.js';\nimport { Label } from './Label.js';\nimport { Prefix } from './Prefix.js';\nimport { Suffix } from './Suffix.js';\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport {\n  type AriaDisabledProps,\n  type AriaLabelingProps,\n} from '../../core/types/a11y-props.js';\nimport { type BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { parseBoolean } from '../../core/utils/parse-boolean.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { fieldTokens } from '../../styles/field.sty.js';\n\nconst COMPONENT_NAME = 'Button';\n\n//#region Typings\n\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface ButtonOwnProps\n  extends AriaLabelingProps,\n    AriaDisabledProps,\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * If a button is disabled e.g. it cannot be interacted with.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Different variants have different styles.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'emphasized' | 'accent';\n\n  /**\n   * The HTML button type.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n   * @defaultValue 'button'\n   */\n  type?: 'button' | 'reset' | 'submit';\n\n  /** Called when the button is interacted with. */\n  onClick?: MouseEventHandler;\n\n  /**\n   * The width of the button.\n   * @defaultValue 'content'\n   */\n  width?: 'content' | 'full' | CSS.Property.Width<string & {}>;\n\n  /**\n   * The color of the button. This should be chosen based on the context\n   * the button is used in.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'critical' | 'warning';\n\n  /**\n   * Controls the text alignment inside the button. Only affects the button\n   * if the width is not set to 'content'.\n   * @defaultValue 'center'\n   */\n  textAlign?: 'center' | 'start';\n\n  /**\n   * The size of the button.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n\n  /**\n   * The current loading state of the button. If true, a loading icon is shown, the button stays in the tab order with aria-disabled=true,\n   * and its busy state is signalled via aria-busy=true.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type ButtonProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  ButtonOwnProps\n>;\n\ntype ButtonSlots = {\n  label?: ReactNode;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  freeform?: ReactNode[];\n};\n\n//#endregion\n\n/**\n * Iterates over child nodes to extract specific component slots.\n * @public\n */\nexport default function getButtonSlots(children: ReactNode) {\n  const slots: ButtonSlots = {};\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Suffix:\n          slots.suffix = child;\n          break;\n        case Prefix:\n          slots.prefix = child;\n          break;\n        case Label:\n          slots.label = child;\n          break;\n        default:\n          slots.freeform ??= [];\n          slots.freeform.push(child);\n          break;\n      }\n    } else {\n      if (child !== null && child !== undefined) {\n        slots.freeform ??= [];\n        slots.freeform.push(child);\n      }\n    }\n  });\n\n  return slots;\n}\n\nconst _Button: <E extends ElementType = 'button'>(\n  props: ButtonProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(props: ButtonProps<E>, ref: typeof props.ref) => {\n    const {\n      children,\n      variant = 'default',\n      disabled,\n      'aria-disabled': ariaDisabledProp,\n      required,\n      id: propId,\n      type = 'button',\n      onClick,\n      ariaLabel,\n      width = 'content',\n      color = 'neutral',\n      textAlign = 'center',\n      size = 'default',\n      loading = false,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      as,\n      ...remainingProps\n    }: ButtonProps<E> = props;\n    const slots = getButtonSlots(children);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaDisabled = parseBoolean(ariaDisabledProp);\n\n    const nativeDisabledOrLoading = useMemo(\n      () => (loading ? true : disabled),\n      [disabled, loading],\n    );\n    const disabledOrLoading = useMemo(\n      () => nativeDisabledOrLoading || ariaDisabled,\n      [ariaDisabled, nativeDisabledOrLoading],\n    );\n\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n    const handleButtonClick: MouseEventHandler<HTMLElement> = (event) => {\n      if (nativeDisabledOrLoading) {\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      onClick?.(event);\n    };\n\n    const buttonProps = {\n      ref,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      required,\n      disabled: disabled && !ariaDisabled,\n      id: propId,\n      type,\n      ...ariaLabelingProps,\n      'aria-disabled': loading ? true : ariaDisabledProp,\n      'aria-busy': loading,\n      onClick: handleButtonClick,\n    };\n\n    // Propagation needs to be disabled on the disabled button because\n    // it would still trigger actions on parents that would listen to it.\n    // For example the menu or the useOverlay hook.\n    const disabledPropagationProps = {\n      onPointerDown(evt: PointerEvent) {\n        if (nativeDisabledOrLoading) {\n          evt.preventDefault();\n          evt.stopPropagation();\n        }\n      },\n      onPointerUp(evt: PointerEvent) {\n        if (nativeDisabledOrLoading) {\n          evt.preventDefault();\n          evt.stopPropagation();\n        }\n      },\n    };\n\n    const hasChildren = children || children === 0;\n\n    const buttonMergedProps = {\n      ...mergeProps(\n        buttonProps,\n        disabledPropagationProps,\n        // Need to cast this one as the inference of mergeProps would generate\n        // a not allowed overlap. The restProps type is too complex due to the\n        // polymorphic inheritance.\n        restProps as Record<string, unknown>,\n        behavioralTrackingProps,\n      ),\n    };\n\n    const intl = useIntl();\n\n    // Make the component polymorphic\n    const Component = as || 'button';\n\n    // Render a void element if no children are set and it's not loading (so self-closing polymorphed tags won't break)\n    if (!hasChildren) {\n      return (\n        <Component\n          data-dt-component={COMPONENT_NAME}\n          {...buttonMergedProps}\n          className={clsx(\n            consumerClassName,\n            'strato-inputgroup',\n            fieldTokens({ variant, color, disabled: disabledOrLoading }),\n            styles.button({\n              disabled: disabledOrLoading,\n              textAlign,\n              size,\n            }),\n            focusRingStatic({\n              when: 'focus-visible',\n              color,\n              disabled,\n            }),\n            {\n              [`${styles.widths.content}`]: width === 'content',\n              [`${styles.widths.full}`]: width === 'full',\n            },\n          )}\n          style={{\n            width: width !== 'content' && width !== 'full' ? width : undefined,\n          }}\n        />\n      );\n    }\n\n    return (\n      <Component\n        data-dt-component={COMPONENT_NAME}\n        className={clsx(\n          consumerClassName,\n          'strato-inputgroup',\n          fieldTokens({\n            variant,\n            color,\n            disabled: disabledOrLoading || ariaDisabled,\n          }),\n          styles.button({\n            disabled: disabledOrLoading || ariaDisabled,\n            textAlign,\n            size,\n          }),\n          {\n            [`${styles.widths.content}`]: width === 'content',\n            [`${styles.widths.full}`]: width === 'full',\n          },\n          focusRingStatic({\n            when: 'focus-visible',\n            color,\n            disabled,\n          }),\n        )}\n        style={{\n          width: width !== 'content' && width !== 'full' ? width : undefined,\n          ...consumerStyle,\n        }}\n        {...buttonMergedProps}\n      >\n        {loading && (\n          <div className={styles.loading}>\n            <ProgressCircle\n              size=\"small\"\n              color={color}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'Loading',\n                id: 'cycz+bYG+VH7Of4e',\n                description: 'Label for the loading state.',\n              })}\n            />\n          </div>\n        )}\n        <Grid\n          gap={size === 'default' ? 4 : 2}\n          grid=\"auto / auto-flow auto\"\n          width=\"100%\"\n          maxWidth=\"100%\"\n          alignItems=\"center\"\n          justifyContent={textAlign === 'start' ? 'space-between' : 'center'}\n          style={{\n            visibility: loading ? 'hidden' : undefined,\n          }}\n        >\n          {textAlign === 'start' ? (\n            <Flex minWidth={0} gap={size === 'default' ? 4 : 2}>\n              {slots.prefix}\n              {slots.label}\n              {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n            </Flex>\n          ) : (\n            <>\n              {slots.prefix}\n              {slots.label}\n              {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n            </>\n          )}\n          {slots.suffix}\n        </Grid>\n      </Component>\n    );\n  },\n);\n\n(_Button as typeof _Button & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Buttons let users trigger actions or events\n * with a single click, or by pressing\n * `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const Button = Object.assign(_Button, {\n  Suffix,\n  Prefix,\n  Label,\n});\n"],
+  "mappings": "AAkRQ,SA4FI,UA5FJ,KAsFI,YAtFJ;AAlRR,OAAO,UAAU;AAEjB;AAAA,EACE;AAAA,EAEA;AAAA,EAKA;AAAA,OACK;AACP,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB;AAWhC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,MAAM,iBAAiB;AA8FR,SAAR,eAAgC,UAAqB;AAC1D,QAAM,QAAqB,CAAC;AAE5B,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,SAAS;AACf;AAAA,QACF,KAAK;AACH,gBAAM,SAAS;AACf;AAAA,QACF,KAAK;AACH,gBAAM,QAAQ;AACd;AAAA,QACF;AACE,gBAAM,aAAa,CAAC;AACpB,gBAAM,SAAS,KAAK,KAAK;AACzB;AAAA,MACJ;AAAA,IACF,OAAO;AACL,UAAI,UAAU,QAAQ,UAAU,QAAW;AACzC,cAAM,aAAa,CAAC;AACpB,cAAM,SAAS,KAAK,KAAK;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,UAEqC;AAAA,EACzC,CAAwB,OAAuB,QAA0B;AACvE,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,iBAAiB;AAAA,MACjB;AAAA,MACA,IAAI;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MACA,GAAG;AAAA,IACL,IAAoB;AACpB,UAAM,QAAQ,eAAe,QAAQ;AAErC,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM,eAAe,aAAa,gBAAgB;AAElD,UAAM,0BAA0B;AAAA,MAC9B,MAAO,UAAU,OAAO;AAAA,MACxB,CAAC,UAAU,OAAO;AAAA,IACpB;AACA,UAAM,oBAAoB;AAAA,MACxB,MAAM,2BAA2B;AAAA,MACjC,CAAC,cAAc,uBAAuB;AAAA,IACxC;AAEA,UAAM,oBAAoB,qBAAqB,SAAS;AAExD,UAAM,oBAAoD,CAAC,UAAU;AACnE,UAAI,yBAAyB;AAC3B,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB;AAAA,MACF;AAEA,gBAAU,KAAK;AAAA,IACjB;AAEA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MACA,UAAU,YAAY,CAAC;AAAA,MACvB,IAAI;AAAA,MACJ;AAAA,MACA,GAAG;AAAA,MACH,iBAAiB,UAAU,OAAO;AAAA,MAClC,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAKA,UAAM,2BAA2B;AAAA,MAC/B,cAAc,KAAmB;AAC/B,YAAI,yBAAyB;AAC3B,cAAI,eAAe;AACnB,cAAI,gBAAgB;AAAA,QACtB;AAAA,MACF;AAAA,MACA,YAAY,KAAmB;AAC7B,YAAI,yBAAyB;AAC3B,cAAI,eAAe;AACnB,cAAI,gBAAgB;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAEA,UAAM,cAAc,YAAY,aAAa;AAE7C,UAAM,oBAAoB;AAAA,MACxB,GAAG;AAAA,QACD;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,OAAO,QAAQ;AAGrB,UAAM,YAAY,MAAM;AAGxB,QAAI,CAAC,aAAa;AAChB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,qBAAmB;AAAA,UAClB,GAAG;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,YAAY,EAAE,SAAS,OAAO,UAAU,kBAAkB,CAAC;AAAA,YAC3D,OAAO,OAAO;AAAA,cACZ,UAAU;AAAA,cACV;AAAA,cACA;AAAA,YACF,CAAC;AAAA,YACD,gBAAgB;AAAA,cACd,MAAM;AAAA,cACN;AAAA,cACA;AAAA,YACF,CAAC;AAAA,YACD;AAAA,cACE,CAAC,GAAG,OAAO,OAAO,OAAO,EAAE,GAAG,UAAU;AAAA,cACxC,CAAC,GAAG,OAAO,OAAO,IAAI,EAAE,GAAG,UAAU;AAAA,YACvC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,OAAO,UAAU,aAAa,UAAU,SAAS,QAAQ;AAAA,UAC3D;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,qBAAmB;AAAA,QACnB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,YAAY;AAAA,YACV;AAAA,YACA;AAAA,YACA,UAAU,qBAAqB;AAAA,UACjC,CAAC;AAAA,UACD,OAAO,OAAO;AAAA,YACZ,UAAU,qBAAqB;AAAA,YAC/B;AAAA,YACA;AAAA,UACF,CAAC;AAAA,UACD;AAAA,YACE,CAAC,GAAG,OAAO,OAAO,OAAO,EAAE,GAAG,UAAU;AAAA,YACxC,CAAC,GAAG,OAAO,OAAO,IAAI,EAAE,GAAG,UAAU;AAAA,UACvC;AAAA,UACA,gBAAgB;AAAA,YACd,MAAM;AAAA,YACN;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,OAAO;AAAA,UACL,OAAO,UAAU,aAAa,UAAU,SAAS,QAAQ;AAAA,UACzD,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,qBACC,oBAAC,SAAI,WAAW,OAAO,SACrB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA,cAAY,KAAK,cAAc;AAAA,gBAC7B,gBAAgB;AAAA,gBAChB,IAAI;AAAA,gBACJ,aAAa;AAAA,cACf,CAAC;AAAA;AAAA,UACH,GACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,SAAS,YAAY,IAAI;AAAA,cAC9B,MAAK;AAAA,cACL,OAAM;AAAA,cACN,UAAS;AAAA,cACT,YAAW;AAAA,cACX,gBAAgB,cAAc,UAAU,kBAAkB;AAAA,cAC1D,OAAO;AAAA,gBACL,YAAY,UAAU,WAAW;AAAA,cACnC;AAAA,cAEC;AAAA,8BAAc,UACb,qBAAC,QAAK,UAAU,GAAG,KAAK,SAAS,YAAY,IAAI,GAC9C;AAAA,wBAAM;AAAA,kBACN,MAAM;AAAA,kBACN,MAAM,YAAY,oBAAC,OAAO,OAAP,EAAc,gBAAM,UAAS;AAAA,mBACnD,IAEA,iCACG;AAAA,wBAAM;AAAA,kBACN,MAAM;AAAA,kBACN,MAAM,YAAY,oBAAC,OAAO,OAAP,EAAc,gBAAM,UAAS;AAAA,mBACnD;AAAA,gBAED,MAAM;AAAA;AAAA;AAAA,UACT;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cACpD;AAQK,MAAM,SAAS,OAAO,OAAO,SAAS;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/buttons/button/Button.sty.js

@@ -3,10 +3,10 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Button.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var button = _7a468({ defaultClassName: "_10kgnsa0-3-7-1", variantClassNames: { textAlign: { start: "_10kgnsa1-3-7-1", center: "_10kgnsa2-3-7-1" }, size: { condensed: "_10kgnsa3-3-7-1", "default": "_10kgnsa4-3-7-1" }, disabled: { true: "_10kgnsa5-3-7-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = _7a468({ defaultClassName: "_10kgnsa9-3-7-1", variantClassNames: { textual: { true: "_oqqp1n0-3-7-1", false: "_10kgnsab-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-7-1";
-var widths = { full: "_10kgnsa6-3-7-1", content: "_10kgnsa7-3-7-1" };
+var button = _7a468({ defaultClassName: "_10kgnsa0-3-8-0", variantClassNames: { textAlign: { start: "_10kgnsa1-3-8-0", center: "_10kgnsa2-3-8-0" }, size: { condensed: "_10kgnsa3-3-8-0", "default": "_10kgnsa4-3-8-0" }, disabled: { true: "_10kgnsa5-3-8-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = _7a468({ defaultClassName: "_10kgnsa9-3-8-0", variantClassNames: { textual: { true: "_oqqp1n0-3-8-0", false: "_10kgnsab-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-8-0";
+var widths = { full: "_10kgnsa6-3-8-0", content: "_10kgnsa7-3-8-0" };
 export {
   button,
   label,

package/esm/buttons/button/Button.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/button/Button.css.ts"],
-  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-7-1',variantClassNames:{textAlign:{start:'_10kgnsa1-3-7-1',center:'_10kgnsa2-3-7-1'},size:{condensed:'_10kgnsa3-3-7-1','default':'_10kgnsa4-3-7-1'},disabled:{true:'_10kgnsa5-3-7-1'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-7-1',variantClassNames:{textual:{true:'_oqqp1n0-3-7-1',false:'_10kgnsab-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-7-1';\nexport var widths = {full:'_10kgnsa6-3-7-1',content:'_10kgnsa7-3-7-1'};"],
+  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-8-0',variantClassNames:{textAlign:{start:'_10kgnsa1-3-8-0',center:'_10kgnsa2-3-8-0'},size:{condensed:'_10kgnsa3-3-8-0','default':'_10kgnsa4-3-8-0'},disabled:{true:'_10kgnsa5-3-8-0'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-8-0',variantClassNames:{textual:{true:'_oqqp1n0-3-8-0',false:'_10kgnsab-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-8-0';\nexport var widths = {full:'_10kgnsa6-3-8-0',content:'_10kgnsa7-3-8-0'};"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,OAAM,mBAAkB,QAAO,kBAAiB,GAAE,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjU,IAAI,QAAQ,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1K,IAAI,UAAU;AACd,IAAI,SAAS,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB;",
   "names": []
 }

package/esm/buttons/intent-button/IntentButton.css

@@ -1,3 +1,3 @@
-._1xe9ern0-3-7-1 {
+._1xe9ern0-3-8-0 {
   opacity: 0.5;
 }

package/esm/buttons/intent-button/IntentButton.sty.js

@@ -1,5 +1,5 @@
 import "./IntentButton.css";
-var disabledAppIconOpacity = "_1xe9ern0-3-7-1";
+var disabledAppIconOpacity = "_1xe9ern0-3-8-0";
 export {
   disabledAppIconOpacity
 };

package/esm/buttons/intent-button/IntentButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/intent-button/IntentButton.css.ts"],
-  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-7-1';"],
+  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

package/esm/buttons/intent-button/IntentButtonWithResponse.js

@@ -43,10 +43,10 @@ const IntentButtonWithResponse = /* @__PURE__ */ forwardRef((props, ref) => {
     Button,
     {
       ref,
-      onClick: handleClick,
+      onClick: (event) => void handleClick(event),
       onMouseDown: (event) => {
         if (event.nativeEvent.button === 1) {
-          handleClick(event).catch(() => void 0);
+          void handleClick(event);
         }
       },
       disabled,

package/esm/buttons/intent-button/IntentButtonWithResponse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/intent-button/IntentButtonWithResponse.tsx"],
-  "sourcesContent": ["import { forwardRef, type MouseEvent as ReactMouseEvent } from 'react';\n\n\nimport * as styles from './IntentButton.sty.js';\nimport { useIntentWithResponse } from '../../core/hooks/intent.js';\nimport { type IntentWithResponseProps } from '../../core/slots/Intent/Intent.js';\nimport { AppIcon } from '../../layouts/app-header/app-icon/AppIcon.js';\nimport { Button, ButtonOwnProps } from '../button/Button.js';\n\n//#region Typings\n/** Accepted properties for the IntentButtonWithResponse. */\ntype IntentButtonWithResponseProps = Omit<IntentWithResponseProps, 'onSelect'> &\n  Pick<\n    ButtonOwnProps,\n    | 'onClick'\n    | 'color'\n    | 'variant'\n    | 'width'\n    | 'aria-disabled'\n    | 'textAlign'\n    | 'size'\n  > & {\n    disabled?: boolean;\n  };\n//#endregion\n\n/**\n * Renders a button that sends an intent and handles the response.\n * Used when `responseProperties` and `onResponse` are provided.\n * @internal\n */\nexport const IntentButtonWithResponse = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  IntentButtonWithResponseProps\n>((props, ref) => {\n  const {\n    onResponse,\n    payload,\n    options,\n    children,\n    icon,\n    disabled,\n    onClick,\n    size,\n    textAlign,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  } = props;\n\n  const intentWithResponse = useIntentWithResponse({\n    payload,\n    options,\n  });\n\n  const handleClick = async (event: ReactMouseEvent) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      // already handled\n      return;\n    }\n\n    try {\n      const response = await intentWithResponse.send();\n      onResponse(response);\n    } catch (error) {\n      onResponse({\n        status: 'error',\n        error: new Error('Error sending intent with response', {\n          cause: error,\n        }),\n      });\n    }\n  };\n\n  return (\n    <Button\n      ref={ref}\n      onClick={handleClick}\n      onMouseDown={(event: ReactMouseEvent) => {\n        // allow middle mouse button click.\n        if (event.nativeEvent.button === 1) {\n          handleClick(event).catch(() => undefined);\n        }\n      }}\n      disabled={disabled}\n      aria-disabled={ariaDisabledProp}\n      textAlign={textAlign}\n      size={size}\n      {...remainingProps}\n    >\n      {intentWithResponse.iconURL && (\n        <Button.Prefix>\n          <AppIcon\n            src={intentWithResponse.iconURL}\n            className={\n              disabled || ariaDisabledProp\n                ? styles.disabledAppIconOpacity\n                : undefined\n            }\n            alt=\"\"\n          />\n        </Button.Prefix>\n      )}\n      {icon && <Button.Prefix>{icon}</Button.Prefix>}\n      {children}\n    </Button>\n  );\n});\n"],
-  "mappings": "AA2EI,SAiBM,KAjBN;AA3EJ,SAAS,kBAAsD;AAG/D,YAAY,YAAY;AACxB,SAAS,6BAA6B;AAEtC,SAAS,eAAe;AACxB,SAAS,cAA8B;AAwBhC,MAAM,2BAA2C,2BAGtD,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,qBAAqB,sBAAsB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,OAAO,UAA2B;AACpD,cAAU,KAAK;AACf,QAAI,MAAM,mBAAmB,GAAG;AAE9B;AAAA,IACF;AAEA,QAAI;AACF,YAAM,WAAW,MAAM,mBAAmB,KAAK;AAC/C,iBAAW,QAAQ;AAAA,IACrB,SAAS,OAAO;AACd,iBAAW;AAAA,QACT,QAAQ;AAAA,QACR,OAAO,IAAI,MAAM,sCAAsC;AAAA,UACrD,OAAO;AAAA,QACT,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,aAAa,CAAC,UAA2B;AAEvC,YAAI,MAAM,YAAY,WAAW,GAAG;AAClC,sBAAY,KAAK,EAAE,MAAM,MAAM,MAAS;AAAA,QAC1C;AAAA,MACF;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,2BAAmB,WAClB,oBAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,mBAAmB;AAAA,YACxB,WACE,YAAY,mBACR,OAAO,yBACP;AAAA,YAEN,KAAI;AAAA;AAAA,QACN,GACF;AAAA,QAED,QAAQ,oBAAC,OAAO,QAAP,EAAe,gBAAK;AAAA,QAC7B;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import { forwardRef, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport * as styles from './IntentButton.sty.js';\nimport { useIntentWithResponse } from '../../core/hooks/intent.js';\nimport { type IntentWithResponseProps } from '../../core/slots/Intent/Intent.js';\nimport { AppIcon } from '../../layouts/app-header/app-icon/AppIcon.js';\nimport { Button, ButtonOwnProps } from '../button/Button.js';\n\n//#region Typings\n/** Accepted properties for the IntentButtonWithResponse. */\ntype IntentButtonWithResponseProps = Omit<IntentWithResponseProps, 'onSelect'> &\n  Pick<\n    ButtonOwnProps,\n    | 'onClick'\n    | 'color'\n    | 'variant'\n    | 'width'\n    | 'aria-disabled'\n    | 'textAlign'\n    | 'size'\n  > & {\n    disabled?: boolean;\n  };\n//#endregion\n\n/**\n * Renders a button that sends an intent and handles the response.\n * Used when `responseProperties` and `onResponse` are provided.\n * @internal\n */\nexport const IntentButtonWithResponse = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  IntentButtonWithResponseProps\n>((props, ref) => {\n  const {\n    onResponse,\n    payload,\n    options,\n    children,\n    icon,\n    disabled,\n    onClick,\n    size,\n    textAlign,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  } = props;\n\n  const intentWithResponse = useIntentWithResponse({\n    payload,\n    options,\n  });\n\n  const handleClick = async (event: ReactMouseEvent) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      // already handled\n      return;\n    }\n\n    try {\n      const response = await intentWithResponse.send();\n      onResponse(response);\n    } catch (error) {\n      onResponse({\n        status: 'error',\n        error: new Error('Error sending intent with response', {\n          cause: error,\n        }),\n      });\n    }\n  };\n\n  return (\n    <Button\n      ref={ref}\n      onClick={(event) => void handleClick(event)}\n      onMouseDown={(event: ReactMouseEvent) => {\n        // allow middle mouse button click.\n        if (event.nativeEvent.button === 1) {\n          void handleClick(event);\n        }\n      }}\n      disabled={disabled}\n      aria-disabled={ariaDisabledProp}\n      textAlign={textAlign}\n      size={size}\n      {...remainingProps}\n    >\n      {intentWithResponse.iconURL && (\n        <Button.Prefix>\n          <AppIcon\n            src={intentWithResponse.iconURL}\n            className={\n              disabled || ariaDisabledProp\n                ? styles.disabledAppIconOpacity\n                : undefined\n            }\n            alt=\"\"\n          />\n        </Button.Prefix>\n      )}\n      {icon && <Button.Prefix>{icon}</Button.Prefix>}\n      {children}\n    </Button>\n  );\n});\n"],
+  "mappings": "AA0EI,SAiBM,KAjBN;AA1EJ,SAAS,kBAAsD;AAE/D,YAAY,YAAY;AACxB,SAAS,6BAA6B;AAEtC,SAAS,eAAe;AACxB,SAAS,cAA8B;AAwBhC,MAAM,2BAA2C,2BAGtD,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,qBAAqB,sBAAsB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,OAAO,UAA2B;AACpD,cAAU,KAAK;AACf,QAAI,MAAM,mBAAmB,GAAG;AAE9B;AAAA,IACF;AAEA,QAAI;AACF,YAAM,WAAW,MAAM,mBAAmB,KAAK;AAC/C,iBAAW,QAAQ;AAAA,IACrB,SAAS,OAAO;AACd,iBAAW;AAAA,QACT,QAAQ;AAAA,QACR,OAAO,IAAI,MAAM,sCAAsC;AAAA,UACrD,OAAO;AAAA,QACT,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,UAAU,KAAK,YAAY,KAAK;AAAA,MAC1C,aAAa,CAAC,UAA2B;AAEvC,YAAI,MAAM,YAAY,WAAW,GAAG;AAClC,eAAK,YAAY,KAAK;AAAA,QACxB;AAAA,MACF;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,2BAAmB,WAClB,oBAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,mBAAmB;AAAA,YACxB,WACE,YAAY,mBACR,OAAO,yBACP;AAAA,YAEN,KAAI;AAAA;AAAA,QACN,GACF;AAAA,QAED,QAAQ,oBAAC,OAAO,QAAP,EAAe,gBAAK;AAAA,QAC7B;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": []
 }

package/esm/buttons/notify-button/NotifyButton.css

@@ -1,10 +1,10 @@
-._1j9pkom0-3-7-1 {
+._1j9pkom0-3-8-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-16, 16px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._1j9pkom1-3-7-1 {
+._1j9pkom1-3-8-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

package/esm/buttons/notify-button/NotifyButton.sty.js

@@ -1,6 +1,6 @@
 import "./NotifyButton.css";
-var overlay = "_1j9pkom0-3-7-1";
-var toast = "_1j9pkom1-3-7-1";
+var overlay = "_1j9pkom0-3-8-0";
+var toast = "_1j9pkom1-3-8-0";
 export {
   overlay,
   toast

package/esm/buttons/notify-button/NotifyButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.css.ts"],
-  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-7-1';\nexport var toast = '_1j9pkom1-3-7-1';"],
+  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-8-0';\nexport var toast = '_1j9pkom1-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,QAAQ;",
   "names": []
 }

package/esm/buttons/run-query-button/RunQueryButton.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { CriticalIcon, PlayIcon } from "@dynatrace/strato-icons";
 import { ProgressCircle } from "../../content/progress/ProgressCircle.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
@@ -35,15 +35,14 @@ function getColor(queryState) {
   }
 }
 function PrefixIcon({
-  type,
-  ariaLabel
+  type
 }) {
   switch (type) {
     case "idle":
     case "success":
       return /* @__PURE__ */ jsx(PlayIcon, {});
     case "loading":
-      return /* @__PURE__ */ jsx(ProgressCircle, { size: "small", "aria-label": ariaLabel });
+      return /* @__PURE__ */ jsx(ProgressCircle, { size: "small", "aria-hidden": true });
     case "error":
       return /* @__PURE__ */ jsx(CriticalIcon, {});
   }
@@ -111,12 +110,6 @@ const RunQueryButton = /* @__PURE__ */ forwardRef((props, ref) => {
   } = props;
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
   const allowsClickHandler = queryState !== "loading" || queryState === "loading" && cancelable;
-  const intl = useIntl();
-  const ariaLabel = intl.formatMessage({
-    description: "Label for button indicating that a query is loading",
-    defaultMessage: "Running",
-    id: "hi3IodOo0ygpihhY"
-  });
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -128,15 +121,15 @@ const RunQueryButton = /* @__PURE__ */ forwardRef((props, ref) => {
       variant: getVariant(queryState),
       ref,
       disabled,
-      "aria-live": "polite",
-      "aria-atomic": "true",
+      "aria-busy": queryState === "loading",
+      "aria-disabled": queryState === "loading" && !cancelable,
       className: consumerClassName,
       style: consumerStyle,
       ...mergeProps(restProps, behavioralTrackingProps),
       "data-dt-component": COMPONENT_NAME,
       children: [
-        /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(PrefixIcon, { type: queryState, ariaLabel }) }),
-        /* @__PURE__ */ jsx(ButtonMessage, { type: queryState, cancelable })
+        /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(PrefixIcon, { type: queryState }) }),
+        /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx(ButtonMessage, { type: queryState, cancelable }) })
       ]
     }
   );

package/esm/buttons/run-query-button/RunQueryButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/run-query-button/RunQueryButton.tsx"],
-  "sourcesContent": ["import { forwardRef, type MouseEventHandler, type ReactElement } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { CriticalIcon, PlayIcon } from '@dynatrace/strato-icons';\n\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Button } from '../button/Button.js';\n\nconst COMPONENT_NAME = 'RunQueryButton';\n\n//#region Typings\n/**\n * All options available for the RunQueryButton's state.\n * @public\n */\nexport const queryStateOptions = [\n  'idle',\n  'loading',\n  'success',\n  'error',\n] as const;\n\n/**\n * 1. idle: The query is yet to be run.\n * 2. loading: The query is currently running.\n * 3. success: The query can be rerun again (Query was successful and no errors have occurred).\n * 4. error: The query has returned an error, user can retry.\n * @public\n */\nexport type QueryStateType = (typeof queryStateOptions)[number];\n\n/**\n * @public\n */\nexport interface RunQueryButtonProps\n  extends AriaLabelingProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** When the run query button is disabled it cannot be interacted with.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The current button state.\n   * @defaultValue idle\n   */\n  queryState?: QueryStateType;\n\n  /** Callback triggered when the RunQueryButton is interacted with. */\n  onClick?: MouseEventHandler;\n\n  /**\n   * Whether the run query button is cancelable, i.e., if the loading\n   * state can be interrupted.\n   * @defaultValue true\n   */\n  cancelable?: boolean;\n}\n//#endregion\n\n/**\n * @param queryState -\n * @returns the correct variant based on the state of the RunQueryButton\n */\nfunction getVariant(\n  queryState: QueryStateType,\n): ['default', 'emphasized', 'accent'][number] {\n  switch (queryState) {\n    case 'idle':\n      return 'accent';\n    case 'loading':\n    case 'success':\n    case 'error':\n      return 'emphasized';\n  }\n}\n\n/**\n * @param queryState -\n * @returns the correct variant based on the state of the RunQueryButton\n */\nfunction getColor(\n  queryState: QueryStateType,\n): ['primary', 'neutral', 'success', 'warning', 'critical'][number] {\n  switch (queryState) {\n    case 'idle':\n      return 'primary';\n    case 'loading':\n    case 'success':\n      return 'neutral';\n    case 'error':\n      return 'critical';\n  }\n}\n\n/**\n * Component version of the correct prefix icon to be used in the\n * RunQueryButton based on its state.\n */\nfunction PrefixIcon({\n  type,\n  ariaLabel,\n}: Readonly<{\n  type: QueryStateType;\n  ariaLabel: string;\n}>): ReactElement | null {\n  switch (type) {\n    case 'idle':\n    case 'success':\n      return <PlayIcon />;\n    case 'loading':\n      return <ProgressCircle size=\"small\" aria-label={ariaLabel} />;\n    case 'error':\n      return <CriticalIcon />;\n  }\n}\n\ntype RunQueryButtonMessageProps = {\n  type: QueryStateType;\n  cancelable: boolean;\n};\n\n/**\n * Component for the button label based on the query state.\n */\nfunction ButtonMessage(\n  props: Readonly<RunQueryButtonMessageProps>,\n): ReactElement | null {\n  const { type, cancelable } = props;\n\n  switch (type) {\n    case 'idle':\n      return (\n        <FormattedMessage\n          description=\"Label for button used to run a query\"\n          defaultMessage=\"Run query\"\n          id=\"CwGi8xbTtV+fdsu5\"\n        />\n      );\n    case 'success':\n      return (\n        <FormattedMessage\n          description=\"Label for button used to rerun a query after it was successful\"\n          defaultMessage=\"Run query\"\n          id=\"J9M12SSZNn2dKokI\"\n        />\n      );\n    case 'loading':\n      return cancelable ? (\n        <FormattedMessage\n          description=\"Call to action for cancelable query button\"\n          defaultMessage=\"Cancel query\"\n          id=\"Za5bQfBDnyyur0mw\"\n        />\n      ) : (\n        <FormattedMessage\n          description=\"Label for button indicating that a query is loading\"\n          defaultMessage=\"Running\"\n          id=\"hi3IodOo0ygpihhY\"\n        />\n      );\n    case 'error':\n      return (\n        <FormattedMessage\n          description=\"Label for button indicating that an error has occurred while running the query. Click to retry.\"\n          defaultMessage=\"Error (click to retry)\"\n          id=\"gg76gjIy5leuPbMT\"\n        />\n      );\n  }\n}\n\n/**\n * This button component is used for running queries. It\n * supports four query states: idle, loading, success, and error.\n * @public\n */\nexport const RunQueryButton = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  RunQueryButtonProps\n>((props, ref) => {\n  const {\n    queryState = 'idle',\n    disabled = false,\n    onClick,\n    cancelable = true,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RunQueryButtonProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const allowsClickHandler =\n    queryState !== 'loading' || (queryState === 'loading' && cancelable);\n\n  const intl = useIntl();\n  const ariaLabel = intl.formatMessage({\n    description: 'Label for button indicating that a query is loading',\n    defaultMessage: 'Running',\n    id: 'hi3IodOo0ygpihhY',\n  });\n\n  return (\n    <Button\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      onClick={allowsClickHandler ? onClick : undefined}\n      color={getColor(queryState)}\n      variant={getVariant(queryState)}\n      ref={ref}\n      disabled={disabled}\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      className={consumerClassName}\n      style={consumerStyle}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <Button.Prefix>\n        <PrefixIcon type={queryState} ariaLabel={ariaLabel} />\n      </Button.Prefix>\n      <ButtonMessage type={queryState} cancelable={cancelable} />\n    </Button>\n  );\n});\n\n(\n  RunQueryButton as typeof RunQueryButton & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type MouseEventHandler, type ReactElement } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { CriticalIcon, PlayIcon } from '@dynatrace/strato-icons';\n\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Button } from '../button/Button.js';\n\nconst COMPONENT_NAME = 'RunQueryButton';\n\n//#region Typings\n/**\n * All options available for the RunQueryButton's state.\n * @public\n */\nexport const queryStateOptions = [\n  'idle',\n  'loading',\n  'success',\n  'error',\n] as const;\n\n/**\n * 1. idle: The query is yet to be run.\n * 2. loading: The query is currently running.\n * 3. success: The query can be rerun again (Query was successful and no errors have occurred).\n * 4. error: The query has returned an error, user can retry.\n * @public\n */\nexport type QueryStateType = (typeof queryStateOptions)[number];\n\n/**\n * @public\n */\nexport interface RunQueryButtonProps\n  extends AriaLabelingProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** When the run query button is disabled it cannot be interacted with.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The current button state.\n   * @defaultValue idle\n   */\n  queryState?: QueryStateType;\n\n  /** Callback triggered when the RunQueryButton is interacted with. */\n  onClick?: MouseEventHandler;\n\n  /**\n   * Whether the run query button is cancelable, i.e., if the loading\n   * state can be interrupted.\n   * @defaultValue true\n   */\n  cancelable?: boolean;\n}\n//#endregion\n\n/**\n * @param queryState -\n * @returns the correct variant based on the state of the RunQueryButton\n */\nfunction getVariant(\n  queryState: QueryStateType,\n): ['default', 'emphasized', 'accent'][number] {\n  switch (queryState) {\n    case 'idle':\n      return 'accent';\n    case 'loading':\n    case 'success':\n    case 'error':\n      return 'emphasized';\n  }\n}\n\n/**\n * @param queryState -\n * @returns the correct variant based on the state of the RunQueryButton\n */\nfunction getColor(\n  queryState: QueryStateType,\n): ['primary', 'neutral', 'success', 'warning', 'critical'][number] {\n  switch (queryState) {\n    case 'idle':\n      return 'primary';\n    case 'loading':\n    case 'success':\n      return 'neutral';\n    case 'error':\n      return 'critical';\n  }\n}\n\n/**\n * Component version of the correct prefix icon to be used in the\n * RunQueryButton based on its state.\n */\nfunction PrefixIcon({\n  type,\n}: Readonly<{ type: QueryStateType }>): ReactElement | null {\n  switch (type) {\n    case 'idle':\n    case 'success':\n      return <PlayIcon />;\n    case 'loading':\n      return <ProgressCircle size=\"small\" aria-hidden />;\n    case 'error':\n      return <CriticalIcon />;\n  }\n}\n\ntype RunQueryButtonMessageProps = {\n  type: QueryStateType;\n  cancelable: boolean;\n};\n\n/**\n * Component for the button label based on the query state.\n */\nfunction ButtonMessage(\n  props: Readonly<RunQueryButtonMessageProps>,\n): ReactElement | null {\n  const { type, cancelable } = props;\n\n  switch (type) {\n    case 'idle':\n      return (\n        <FormattedMessage\n          description=\"Label for button used to run a query\"\n          defaultMessage=\"Run query\"\n          id=\"CwGi8xbTtV+fdsu5\"\n        />\n      );\n    case 'success':\n      return (\n        <FormattedMessage\n          description=\"Label for button used to rerun a query after it was successful\"\n          defaultMessage=\"Run query\"\n          id=\"J9M12SSZNn2dKokI\"\n        />\n      );\n    case 'loading':\n      return cancelable ? (\n        <FormattedMessage\n          description=\"Call to action for cancelable query button\"\n          defaultMessage=\"Cancel query\"\n          id=\"Za5bQfBDnyyur0mw\"\n        />\n      ) : (\n        <FormattedMessage\n          description=\"Label for button indicating that a query is loading\"\n          defaultMessage=\"Running\"\n          id=\"hi3IodOo0ygpihhY\"\n        />\n      );\n    case 'error':\n      return (\n        <FormattedMessage\n          description=\"Label for button indicating that an error has occurred while running the query. Click to retry.\"\n          defaultMessage=\"Error (click to retry)\"\n          id=\"gg76gjIy5leuPbMT\"\n        />\n      );\n  }\n}\n\n/**\n * This button component is used for running queries. It\n * supports four query states: idle, loading, success, and error.\n * @public\n */\nexport const RunQueryButton = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  RunQueryButtonProps\n>((props, ref) => {\n  const {\n    queryState = 'idle',\n    disabled = false,\n    onClick,\n    cancelable = true,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RunQueryButtonProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const allowsClickHandler =\n    queryState !== 'loading' || (queryState === 'loading' && cancelable);\n\n  return (\n    <Button\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      onClick={allowsClickHandler ? onClick : undefined}\n      color={getColor(queryState)}\n      variant={getVariant(queryState)}\n      ref={ref}\n      disabled={disabled}\n      aria-busy={queryState === 'loading'}\n      aria-disabled={queryState === 'loading' && !cancelable}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <Button.Prefix>\n        <PrefixIcon type={queryState} />\n      </Button.Prefix>\n      <span role=\"status\">\n        <ButtonMessage type={queryState} cancelable={cancelable} />\n      </span>\n    </Button>\n  );\n});\n\n(\n  RunQueryButton as typeof RunQueryButton & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/hooks/useSeriesActionClickHandler.js

@@ -11,7 +11,13 @@ const useSeriesActionClickHandler = (hasMultipleItems) => {
   const singleItemActionClickHandler = (e) => {
     setState((prev) => ({
       ...prev,
-      overlays: { ...prev.overlays, visibleTooltip: false }
+      overlays: {
+        ...prev.overlays,
+        visibleTooltip: false,
+        pinnedTooltip: false,
+        mouseInBounds: false,
+        mousePosition: void 0
+      }
     }));
   };
   return hasMultipleItems ? multiItemsActionClickHandler : singleItemActionClickHandler;

package/esm/charts/categorical-bar/components/interactions/hooks/useSeriesActionClickHandler.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/hooks/useSeriesActionClickHandler.tsx"],
-  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { isLinkAction } from '../../../../core/components/series-action/utils/is-link-action.js';\nimport { useSetState } from '../../../hooks/store/selectors.js';\n\n/**\n * Hook responsible to return the handler called when clicking on a category action.\n * The handler will handle the logic of keeping the tooltip open in case there are\n * multiple entries in the tooltip, hiding the tooltip alternatively.\n * @param hasMultipleItems -\n */\nexport const useSeriesActionClickHandler = (hasMultipleItems: boolean) => {\n  const setState = useSetState();\n\n  const multiItemsActionClickHandler = (e: ReactMouseEvent) => {\n    if (!isLinkAction(e.target as HTMLElement)) {\n      e.preventDefault();\n    }\n    // needed to avoid the propagation of the event that in some cases\n    // introduce unexpected behaviors (e.g. unpinning tooltip)\n    e.stopPropagation();\n  };\n\n  const singleItemActionClickHandler = (e: ReactMouseEvent) => {\n    setState((prev) => ({\n      ...prev,\n      overlays: { ...prev.overlays, visibleTooltip: false },\n    }));\n  };\n\n  return hasMultipleItems\n    ? multiItemsActionClickHandler\n    : singleItemActionClickHandler;\n};\n"],
-  "mappings": "AAEA,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAQrB,MAAM,8BAA8B,CAAC,qBAA8B;AACxE,QAAM,WAAW,YAAY;AAE7B,QAAM,+BAA+B,CAAC,MAAuB;AAC3D,QAAI,CAAC,aAAa,EAAE,MAAqB,GAAG;AAC1C,QAAE,eAAe;AAAA,IACnB;AAGA,MAAE,gBAAgB;AAAA,EACpB;AAEA,QAAM,+BAA+B,CAAC,MAAuB;AAC3D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU,EAAE,GAAG,KAAK,UAAU,gBAAgB,MAAM;AAAA,IACtD,EAAE;AAAA,EACJ;AAEA,SAAO,mBACH,+BACA;AACN;",
+  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { isLinkAction } from '../../../../core/components/series-action/utils/is-link-action.js';\nimport { useSetState } from '../../../hooks/store/selectors.js';\n\n/**\n * Hook responsible to return the handler called when clicking on a category action.\n * The handler will handle the logic of keeping the tooltip open in case there are\n * multiple entries in the tooltip, hiding the tooltip alternatively.\n * @param hasMultipleItems -\n */\nexport const useSeriesActionClickHandler = (hasMultipleItems: boolean) => {\n  const setState = useSetState();\n\n  const multiItemsActionClickHandler = (e: ReactMouseEvent) => {\n    if (!isLinkAction(e.target as HTMLElement)) {\n      e.preventDefault();\n    }\n    // needed to avoid the propagation of the event that in some cases\n    // introduce unexpected behaviors (e.g. unpinning tooltip)\n    e.stopPropagation();\n  };\n\n  const singleItemActionClickHandler = (e: ReactMouseEvent) => {\n    setState((prev) => ({\n      ...prev,\n      overlays: {\n        ...prev.overlays,\n        visibleTooltip: false,\n        pinnedTooltip: false,\n        mouseInBounds: false,\n        mousePosition: undefined,\n      },\n    }));\n  };\n\n  return hasMultipleItems\n    ? multiItemsActionClickHandler\n    : singleItemActionClickHandler;\n};\n"],
+  "mappings": "AAEA,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAQrB,MAAM,8BAA8B,CAAC,qBAA8B;AACxE,QAAM,WAAW,YAAY;AAE7B,QAAM,+BAA+B,CAAC,MAAuB;AAC3D,QAAI,CAAC,aAAa,EAAE,MAAqB,GAAG;AAC1C,QAAE,eAAe;AAAA,IACnB;AAGA,MAAE,gBAAgB;AAAA,EACpB;AAEA,QAAM,+BAA+B,CAAC,MAAuB;AAC3D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,SAAO,mBACH,+BACA;AACN;",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-7-1 {
+._1wi8enr0-3-8-0 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-7-1 {
+._1wi8enr1-3-8-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./CategoricalBarChartInspectOverlay.css";
-var crosshairLayout = "_1wi8enr0-3-7-1 _13lzg4k0-3-7-1";
-var dataPointLayout = "_1wi8enr1-3-7-1 _13lzg4k0-3-7-1";
+var crosshairLayout = "_1wi8enr0-3-8-0 _13lzg4k0-3-8-0";
+var dataPointLayout = "_1wi8enr1-3-8-0 _13lzg4k0-3-8-0";
 export {
   crosshairLayout,
   dataPointLayout

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-7-1 _13lzg4k0-3-7-1';\nexport var dataPointLayout = '_1wi8enr1-3-7-1 _13lzg4k0-3-7-1';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-8-0 _13lzg4k0-3-8-0';\nexport var dataPointLayout = '_1wi8enr1-3-8-0 _13lzg4k0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/categorical-bar/hooks/store/state-setters.js

@@ -2,7 +2,9 @@ const setMouseOutBounds = (prev) => ({
   ...prev,
   overlays: {
     ...prev.overlays,
-    mouseInBounds: false
+    mouseInBounds: false,
+    mousePosition: void 0,
+    visibleTooltip: prev.overlays.pinnedTooltip
   }
 });
 export {