@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/content/chip-group/ChipGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/ChipGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect, useReducer, useRef, useState } from 'react';\n\n\nimport { chipGroupCSS } from './ChipGroup.sty.js';\nimport { ChipGroupContext } from './contexts/ChipGroupContext.js';\nimport { InternalChipGroupContext } from './contexts/InternalChipGroupContext.js';\nimport { Control } from './Control.js';\nimport { HiddenCount } from './HiddenCount.js';\nimport { chipGroupReducer } from './state/chip-group-state-reducer.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ChipOwnProps } from '../chip/types/chip.js';\n\nconst COMPONENT_NAME = 'ChipGroup';\n\n//#region Types\n/**\n * Accepted properties for ChipGroup\n * @public\n */\nexport interface ChipGroupBaseProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Whether the chip group is disabled.\n   * If set to true, all the chips inside the group are disabled, unless explicitly overridden.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The size of the spacing and chips in the group.\n   * All the chips match the size of the group, but can be overridden individually.\n   * @defaultValue default\n   */\n  size?: ChipOwnProps['size'];\n\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (state: boolean) => void;\n\n  /**\n   * Maximum number of chips rendered before the \"Show more\" control.\n   *\n   * If set to 'auto', the chip group automatically determines\n   * how many chips can fit based on the available width.\n   * If a number is provided, it limits the visible chips to that number\n   * when the group is collapsed, regardless of available space.\n   * @defaultValue 'auto'\n   */\n  maxVisibleChips?: 'auto' | number;\n}\n\n/**\n * @public\n */\nexport interface ChipGroupControlledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: boolean;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: never;\n}\n\n/**\n * @public\n */\nexport interface ChipGroupUncontrolledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: never;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: boolean;\n}\n\n/**\n * @public\n */\nexport type ChipGroupProps = ChipGroupBaseProps &\n  (ChipGroupControlledProps | ChipGroupUncontrolledProps) &\n  WithChildren;\n\n/**\n * ChipGroup component\n */\nconst RootChipGroup = forwardRef<HTMLElement, ChipGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      expanded: expandedProp,\n      defaultExpanded,\n      disabled,\n      size,\n      onExpandedChange,\n      maxVisibleChips = 'auto',\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    }: ChipGroupProps = props;\n\n    const uniqueId = useId();\n\n    const [state, dispatch] = useReducer(chipGroupReducer, {\n      chips: {},\n    });\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      containerRef,\n      forwardedRef,\n    ]);\n\n    // Width of the chip group container.\n    const { width: containerWidth } = useContainerSize(containerRef);\n\n    const [expanded, setExpanded] = useControllableState({\n      value: expandedProp,\n      defaultValue: defaultExpanded,\n      onChange: onExpandedChange,\n    });\n\n    const [allChipsFit, setAllChipsFit] = useState(false);\n    const [hiddenChips, setHiddenChips] = useState<string[]>([]);\n    const [visibleChips, setVisibleChips] = useState<string[]>([]);\n\n    useEffect(() => {\n      const chips = Object.entries(state.chips);\n      const chipKeys = chips.map(([uniqueChipKey]) => uniqueChipKey);\n\n      // Cannot calculate when the chips do not have a width yet.\n      if (!chips[0]?.[1].width) {\n        return;\n      }\n\n      // No need to calculate fitting chips if the group is expanded, but all of them have to be set to visible again.\n      if (expanded) {\n        setHiddenChips([]);\n        setVisibleChips(chipKeys);\n\n        if (\n          !containerRef.current?.firstChild // ChipGroup may be empty.\n        ) {\n          setAllChipsFit(true);\n          return;\n        }\n\n        // Check if the flex container is wrapping. If not, the container has grown\n        // enough so all chips fit again, and we can hide the control.\n        let wrap = false;\n        let child = containerRef.current.firstChild as HTMLElement;\n\n        // requestAnimationFrame ensures the DOM updates are completed before performing the check\n        // and prevent issues with displaying the \"show less\" button.\n        requestAnimationFrame(() => {\n          // Check if any chip is wrapped to the next line.\n          do {\n            if (child.classList.contains('chip') && child.offsetTop > 0) {\n              wrap = true;\n            }\n            child = child.nextSibling as HTMLElement;\n          } while (!wrap && child);\n          setAllChipsFit(!wrap);\n        });\n\n        return;\n      }\n\n      // Flex gap needs to be considered in the calculation.\n      // Either `Spacings.Size6` or `Spacings.Size8`\n      const spacing = size === 'condensed' ? 6 : 8;\n\n      /**\n       * Iterate over all chips and check, if the chips + flex gap still fit in one line.\n       */\n      let totalChipsWidth = 0;\n      let setHidden = true;\n      let _hiddenChipsIndex = chips.length;\n\n      for (const [index, [, value]] of Array.from(chips).entries()) {\n        totalChipsWidth += value.width || 0;\n\n        // Whether the chips have enough space in the container. The first chip is always visible.\n        const chipFits =\n          index === 0 ||\n          Math.floor(totalChipsWidth + index * spacing) <=\n            Math.round(containerWidth);\n\n        // Whether the chips + control have enough space in the container.\n        const chipAndControlFits =\n          index === 0 ||\n          totalChipsWidth +\n            (index + 1) * spacing +\n            (state.control?.width || 0) <=\n            containerWidth;\n\n        // Whether the chip should be visible.\n        // If we are at the last chip and the visibility of the control is determined automatically,\n        // we can safely show the chip. In this case, all of them fit in one line and the control will be hidden.\n        // If the control is always shown, we only show the chip if there's enough space left to also render the control.\n        const visible =\n          index === chips.length - 1 &&\n          (state.control?.show ?? 'auto') === 'auto'\n            ? chipFits\n            : chipAndControlFits;\n\n        // Set the index of the first hidden chip for the first chip that doesn't fit anymore.\n        if (!visible && setHidden) {\n          setHidden = false;\n\n          _hiddenChipsIndex = index;\n        }\n      }\n\n      // Apply maxVisibleChips limit if specified and valid (non-negative)\n      const effectiveHiddenChipsIndex =\n        maxVisibleChips !== 'auto' && maxVisibleChips >= 0\n          ? Math.min(_hiddenChipsIndex, maxVisibleChips)\n          : _hiddenChipsIndex;\n\n      const allFit = effectiveHiddenChipsIndex === chips.length;\n      setAllChipsFit(allFit);\n\n      setHiddenChips(chipKeys.slice(effectiveHiddenChipsIndex));\n      setVisibleChips(chipKeys.slice(0, effectiveHiddenChipsIndex));\n    }, [containerWidth, expanded, setExpanded, size, state, maxVisibleChips]);\n\n    return (\n      <ChipGroupContext.Provider\n        value={{\n          visibleKeys: visibleChips,\n          hiddenKeys: hiddenChips,\n        }}\n      >\n        <InternalChipGroupContext.Provider\n          value={{\n            disabled,\n            size,\n            expanded,\n            allChipsFit,\n            dispatch,\n            setExpanded,\n          }}\n        >\n          <Flex\n            ref={rootRef}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            data-dt-component={COMPONENT_NAME}\n            id={uniqueId}\n            className={clsx(\n              chipGroupCSS({ size, expanded }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n          >\n            {children}\n          </Flex>\n        </InternalChipGroupContext.Provider>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n(RootChipGroup as typeof RootChipGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Use the `ChipGroup` component to group multiple `Chip`s in an expandable container.\n * @public\n */\nexport const ChipGroup = Object.assign(RootChipGroup, {\n  Control,\n  HiddenCount,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect, useReducer, useRef, useState } from 'react';\n\nimport { chipGroupCSS } from './ChipGroup.sty.js';\nimport { ChipGroupContext } from './contexts/ChipGroupContext.js';\nimport { InternalChipGroupContext } from './contexts/InternalChipGroupContext.js';\nimport { Control } from './Control.js';\nimport { HiddenCount } from './HiddenCount.js';\nimport { chipGroupReducer } from './state/chip-group-state-reducer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } 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 { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ChipOwnProps } from '../chip/types/chip.js';\n\nconst COMPONENT_NAME = 'ChipGroup';\n\n//#region Types\n/**\n * Accepted properties for ChipGroup\n * @public\n */\nexport interface ChipGroupBaseProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the chip group is disabled.\n   * If set to true, all the chips inside the group are disabled, unless explicitly overridden.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The size of the spacing and chips in the group.\n   * All the chips match the size of the group, but can be overridden individually.\n   * @defaultValue default\n   */\n  size?: ChipOwnProps['size'];\n\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (state: boolean) => void;\n\n  /**\n   * Maximum number of chips rendered before the \"Show more\" control.\n   *\n   * If set to 'auto', the chip group automatically determines\n   * how many chips can fit based on the available width.\n   * If a number is provided, it limits the visible chips to that number\n   * when the group is collapsed, regardless of available space.\n   * @defaultValue 'auto'\n   */\n  maxVisibleChips?: 'auto' | number;\n}\n\n/**\n * @public\n */\nexport interface ChipGroupControlledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: boolean;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: never;\n}\n\n/**\n * @public\n */\nexport interface ChipGroupUncontrolledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: never;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: boolean;\n}\n\n/**\n * @public\n */\nexport type ChipGroupProps = ChipGroupBaseProps &\n  (ChipGroupControlledProps | ChipGroupUncontrolledProps) &\n  WithChildren;\n\n/**\n * ChipGroup component\n */\nconst RootChipGroup = forwardRef<HTMLElement, ChipGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expanded: expandedProp,\n      defaultExpanded,\n      disabled,\n      size,\n      onExpandedChange,\n      maxVisibleChips = 'auto',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const uniqueId = useId();\n\n    const [state, dispatch] = useReducer(chipGroupReducer, {\n      chips: {},\n    });\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      containerRef,\n      forwardedRef,\n    ]);\n\n    // Width of the chip group container.\n    const { width: containerWidth } = useContainerSize(containerRef);\n\n    const [expanded, setExpanded] = useControllableState({\n      value: expandedProp,\n      defaultValue: defaultExpanded,\n      onChange: onExpandedChange,\n    });\n\n    const [allChipsFit, setAllChipsFit] = useState(false);\n    const [hiddenChips, setHiddenChips] = useState<string[]>([]);\n    const [visibleChips, setVisibleChips] = useState<string[]>([]);\n\n    useEffect(() => {\n      const chips = Object.entries(state.chips);\n      const chipKeys = chips.map(([uniqueChipKey]) => uniqueChipKey);\n\n      // Cannot calculate when the chips do not have a width yet.\n      if (!chips[0]?.[1].width) {\n        return;\n      }\n\n      // No need to calculate fitting chips if the group is expanded, but all of them have to be set to visible again.\n      if (expanded) {\n        setHiddenChips([]);\n        setVisibleChips(chipKeys);\n\n        if (\n          !containerRef.current?.firstChild // ChipGroup may be empty.\n        ) {\n          setAllChipsFit(true);\n          return;\n        }\n\n        // Check if the flex container is wrapping. If not, the container has grown\n        // enough so all chips fit again, and we can hide the control.\n        let wrap = false;\n        let child = containerRef.current.firstChild as HTMLElement;\n\n        // requestAnimationFrame ensures the DOM updates are completed before performing the check\n        // and prevent issues with displaying the \"show less\" button.\n        requestAnimationFrame(() => {\n          // Check if any chip is wrapped to the next line.\n          do {\n            if (child.classList.contains('chip') && child.offsetTop > 0) {\n              wrap = true;\n            }\n            child = child.nextSibling as HTMLElement;\n          } while (!wrap && child);\n          setAllChipsFit(!wrap);\n        });\n\n        return;\n      }\n\n      // Flex gap needs to be considered in the calculation.\n      // Either `Spacings.Size6` or `Spacings.Size8`\n      const spacing = size === 'condensed' ? 6 : 8;\n\n      /**\n       * Iterate over all chips and check, if the chips + flex gap still fit in one line.\n       */\n      let totalChipsWidth = 0;\n      let setHidden = true;\n      let _hiddenChipsIndex = chips.length;\n\n      for (const [index, [, value]] of Array.from(chips).entries()) {\n        totalChipsWidth += value.width || 0;\n\n        // Whether the chips have enough space in the container. The first chip is always visible.\n        const chipFits =\n          index === 0 ||\n          Math.floor(totalChipsWidth + index * spacing) <=\n            Math.round(containerWidth);\n\n        // Whether the chips + control have enough space in the container.\n        const chipAndControlFits =\n          index === 0 ||\n          totalChipsWidth +\n            (index + 1) * spacing +\n            (state.control?.width || 0) <=\n            containerWidth;\n\n        // Whether the chip should be visible.\n        // If we are at the last chip and the visibility of the control is determined automatically,\n        // we can safely show the chip. In this case, all of them fit in one line and the control will be hidden.\n        // If the control is always shown, we only show the chip if there's enough space left to also render the control.\n        const visible =\n          index === chips.length - 1 &&\n          (state.control?.show ?? 'auto') === 'auto'\n            ? chipFits\n            : chipAndControlFits;\n\n        // Set the index of the first hidden chip for the first chip that doesn't fit anymore.\n        if (!visible && setHidden) {\n          setHidden = false;\n\n          _hiddenChipsIndex = index;\n        }\n      }\n\n      // Apply maxVisibleChips limit if specified and valid (non-negative)\n      const effectiveHiddenChipsIndex =\n        maxVisibleChips !== 'auto' && maxVisibleChips >= 0\n          ? Math.min(_hiddenChipsIndex, maxVisibleChips)\n          : _hiddenChipsIndex;\n\n      const allFit = effectiveHiddenChipsIndex === chips.length;\n      setAllChipsFit(allFit);\n\n      setHiddenChips(chipKeys.slice(effectiveHiddenChipsIndex));\n      setVisibleChips(chipKeys.slice(0, effectiveHiddenChipsIndex));\n    }, [containerWidth, expanded, setExpanded, size, state, maxVisibleChips]);\n\n    return (\n      <ChipGroupContext.Provider\n        value={{\n          visibleKeys: visibleChips,\n          hiddenKeys: hiddenChips,\n        }}\n      >\n        <InternalChipGroupContext.Provider\n          value={{\n            disabled,\n            size,\n            expanded,\n            allChipsFit,\n            dispatch,\n            setExpanded,\n          }}\n        >\n          <Flex\n            ref={rootRef}\n            id={uniqueId}\n            className={clsx(\n              chipGroupCSS({ size, expanded }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            {children}\n          </Flex>\n        </InternalChipGroupContext.Provider>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n(RootChipGroup as typeof RootChipGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Use the `ChipGroup` component to group multiple `Chip`s in an expandable container.\n * @public\n */\nexport const ChipGroup = Object.assign(RootChipGroup, {\n  Control,\n  HiddenCount,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/chip-group/ChipGroup.sty.js

@@ -1,6 +1,6 @@
 import "./ChipGroup.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chipGroupCSS = _7a468({ defaultClassName: "_dwt8fp0-3-0-1", variantClassNames: { size: { condensed: "_dwt8fp1-3-0-1", "default": "_dwt8fp2-3-0-1" }, expanded: { true: "_dwt8fp3-3-0-1", false: "_dwt8fp4-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var chipGroupCSS = _7a468({ defaultClassName: "_dwt8fp0-3-1-1", variantClassNames: { size: { condensed: "_dwt8fp1-3-1-1", "default": "_dwt8fp2-3-1-1" }, expanded: { true: "_dwt8fp3-3-1-1", false: "_dwt8fp4-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   chipGroupCSS
 };

package/esm/content/chip-group/ChipGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/ChipGroup.css.ts"],
-  "sourcesContent": ["import './ChipGroup.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chipGroupCSS = _7a468({defaultClassName:'_dwt8fp0-3-0-1',variantClassNames:{size:{condensed:'_dwt8fp1-3-0-1','default':'_dwt8fp2-3-0-1'},expanded:{true:'_dwt8fp3-3-0-1',false:'_dwt8fp4-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './ChipGroup.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chipGroupCSS = _7a468({defaultClassName:'_dwt8fp0-3-1-1',variantClassNames:{size:{condensed:'_dwt8fp1-3-1-1','default':'_dwt8fp2-3-1-1'},expanded:{true:'_dwt8fp3-3-1-1',false:'_dwt8fp4-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,MAAK,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/chip-group/Control.css

@@ -1,4 +1,4 @@
-._uoyq2d0-3-0-1 {
+._uoyq2d0-3-1-1 {
   gap: var(--dt-spacings-size-4, 4px);
   display: inline-flex;
   padding: var(--dt-spacings-size-0, 0);
@@ -23,12 +23,12 @@
   cursor: pointer;
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._uoyq2d0-3-0-1:focus-visible {
+._uoyq2d0-3-1-1:focus-visible {
   text-decoration: none;
 }
-._uoyq2d0-3-0-1:hover {
+._uoyq2d0-3-1-1:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._uoyq2d0-3-0-1:active {
+._uoyq2d0-3-1-1:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }

package/esm/content/chip-group/Control.sty.js

@@ -1,6 +1,6 @@
 import "../../core/styles/focusRingStatic.css";
 import "./Control.css";
-var expandButtonCSS = "_uoyq2d0-3-0-1 _z0fq9b4-3-0-1 _z0fq9bc-3-0-1 _z0fq9b6-3-0-1 _z0fq9ba-3-0-1";
+var expandButtonCSS = "_uoyq2d0-3-1-1 _z0fq9b4-3-1-1 _z0fq9bc-3-1-1 _z0fq9b6-3-1-1 _z0fq9ba-3-1-1";
 export {
   expandButtonCSS
 };

package/esm/content/chip-group/Control.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/Control.css.ts"],
-  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './Control.css';\nexport var expandButtonCSS = '_uoyq2d0-3-0-1 _z0fq9b4-3-0-1 _z0fq9bc-3-0-1 _z0fq9b6-3-0-1 _z0fq9ba-3-0-1';"],
+  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './Control.css';\nexport var expandButtonCSS = '_uoyq2d0-3-1-1 _z0fq9b4-3-1-1 _z0fq9bc-3-1-1 _z0fq9b6-3-1-1 _z0fq9ba-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/content/code-snippet/CodeHighlight.css

@@ -1,4 +1,4 @@
-._1jmxup80-3-0-1 {
+._1jmxup80-3-1-1 {
   margin: 0;
   padding: 0;
   overflow: visible;
@@ -9,19 +9,19 @@
   font-weight: var(--dt-typography-code-base-default-weight, 400);
   word-break: break-word;
 }
-._1jmxup81-3-0-1 {
+._1jmxup81-3-1-1 {
   font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-base-default-size, 14px);
   line-height: var(--dt-typography-code-base-default-line-height, 1.4285714286);
   min-height: calc(2 * var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-20, 20px));
 }
-._1jmxup82-3-0-1 {
+._1jmxup82-3-1-1 {
   font-family: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-small-default-size, 12px);
   line-height: var(--dt-typography-code-small-default-line-height, 1.333333333);
   min-height: calc(2 * var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-16, 16px));
 }
-._1jmxup83-3-0-1 {
+._1jmxup83-3-1-1 {
   display: table-cell;
   position: sticky;
   left: 0;
@@ -34,60 +34,60 @@
   user-select: none;
   white-space: nowrap;
 }
-._1jmxup84-3-0-1 {
+._1jmxup84-3-1-1 {
   display: table-row;
 }
-._1jmxup85-3-0-1 {
+._1jmxup85-3-1-1 {
   display: block;
   box-sizing: border-box;
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
 }
-._1jmxup85-3-0-1::before {
+._1jmxup85-3-1-1::before {
   content: attr(data-linenumber);
 }
-._1jmxup81-3-0-1 ._1jmxup84-3-0-1:first-child ._1jmxup85-3-0-1 {
+._1jmxup81-3-1-1 ._1jmxup84-3-1-1:first-child ._1jmxup85-3-1-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-0-1 ._1jmxup84-3-0-1:first-child ._1jmxup85-3-0-1 {
+._1jmxup82-3-1-1 ._1jmxup84-3-1-1:first-child ._1jmxup85-3-1-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-0-1 ._1jmxup84-3-0-1:last-child ._1jmxup85-3-0-1 {
+._1jmxup81-3-1-1 ._1jmxup84-3-1-1:last-child ._1jmxup85-3-1-1 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-0-1 ._1jmxup84-3-0-1:last-child ._1jmxup85-3-0-1 {
+._1jmxup82-3-1-1 ._1jmxup84-3-1-1:last-child ._1jmxup85-3-1-1 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup86-3-0-1 {
+._1jmxup86-3-1-1 {
   padding-left: var(--dt-spacings-size-16, 16px);
   min-width: 33px;
 }
-._1jmxup87-3-0-1 {
+._1jmxup87-3-1-1 {
   padding-left: var(--dt-spacings-size-12, 12px);
   min-width: 27px;
 }
-._1jmxup88-3-0-1 {
+._1jmxup88-3-1-1 {
   display: table-cell;
   width: 100%;
 }
-._1jmxup81-3-0-1 ._1jmxup84-3-0-1:first-child ._1jmxup88-3-0-1 {
+._1jmxup81-3-1-1 ._1jmxup84-3-1-1:first-child ._1jmxup88-3-1-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-0-1 ._1jmxup84-3-0-1:first-child ._1jmxup88-3-0-1 {
+._1jmxup82-3-1-1 ._1jmxup84-3-1-1:first-child ._1jmxup88-3-1-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-0-1 ._1jmxup84-3-0-1:last-child ._1jmxup88-3-0-1 {
+._1jmxup81-3-1-1 ._1jmxup84-3-1-1:last-child ._1jmxup88-3-1-1 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-0-1 ._1jmxup84-3-0-1:last-child ._1jmxup88-3-0-1 {
+._1jmxup82-3-1-1 ._1jmxup84-3-1-1:last-child ._1jmxup88-3-1-1 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup89-3-0-1 {
+._1jmxup89-3-1-1 {
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._1jmxup8a-3-0-1 {
+._1jmxup8a-3-1-1 {
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-6, 6px);
 }

package/esm/content/code-snippet/CodeHighlight.sty.js

@@ -1,10 +1,10 @@
 import "./CodeHighlight.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var highlightWrapper = _7a468({ defaultClassName: "_1jmxup80-3-0-1", variantClassNames: { size: { "default": "_1jmxup81-3-0-1", condensed: "_1jmxup82-3-0-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var line = "_1jmxup84-3-0-1";
-var lineContent = _7a468({ defaultClassName: "_1jmxup88-3-0-1", variantClassNames: { size: { "default": "_1jmxup89-3-0-1", condensed: "_1jmxup8a-3-0-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var lineNumber = _7a468({ defaultClassName: "_1jmxup85-3-0-1", variantClassNames: { size: { "default": "_1jmxup86-3-0-1", condensed: "_1jmxup87-3-0-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var lineNumberContainer = "_1jmxup83-3-0-1";
+var highlightWrapper = _7a468({ defaultClassName: "_1jmxup80-3-1-1", variantClassNames: { size: { "default": "_1jmxup81-3-1-1", condensed: "_1jmxup82-3-1-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var line = "_1jmxup84-3-1-1";
+var lineContent = _7a468({ defaultClassName: "_1jmxup88-3-1-1", variantClassNames: { size: { "default": "_1jmxup89-3-1-1", condensed: "_1jmxup8a-3-1-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var lineNumber = _7a468({ defaultClassName: "_1jmxup85-3-1-1", variantClassNames: { size: { "default": "_1jmxup86-3-1-1", condensed: "_1jmxup87-3-1-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var lineNumberContainer = "_1jmxup83-3-1-1";
 export {
   highlightWrapper,
   line,

package/esm/content/code-snippet/CodeHighlight.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/code-snippet/CodeHighlight.css.ts"],
-  "sourcesContent": ["import './CodeHighlight.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var highlightWrapper = _7a468({defaultClassName:'_1jmxup80-3-0-1',variantClassNames:{size:{'default':'_1jmxup81-3-0-1',condensed:'_1jmxup82-3-0-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var line = '_1jmxup84-3-0-1';\nexport var lineContent = _7a468({defaultClassName:'_1jmxup88-3-0-1',variantClassNames:{size:{'default':'_1jmxup89-3-0-1',condensed:'_1jmxup8a-3-0-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var lineNumber = _7a468({defaultClassName:'_1jmxup85-3-0-1',variantClassNames:{size:{'default':'_1jmxup86-3-0-1',condensed:'_1jmxup87-3-0-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var lineNumberContainer = '_1jmxup83-3-0-1';"],
+  "sourcesContent": ["import './CodeHighlight.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var highlightWrapper = _7a468({defaultClassName:'_1jmxup80-3-1-1',variantClassNames:{size:{'default':'_1jmxup81-3-1-1',condensed:'_1jmxup82-3-1-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var line = '_1jmxup84-3-1-1';\nexport var lineContent = _7a468({defaultClassName:'_1jmxup88-3-1-1',variantClassNames:{size:{'default':'_1jmxup89-3-1-1',condensed:'_1jmxup8a-3-1-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var lineNumber = _7a468({defaultClassName:'_1jmxup85-3-1-1',variantClassNames:{size:{'default':'_1jmxup86-3-1-1',condensed:'_1jmxup87-3-1-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var lineNumberContainer = '_1jmxup83-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1M,IAAI,OAAO;AACX,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrM,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpM,IAAI,sBAAsB;",
   "names": []
 }

package/esm/content/code-snippet/CodeSnippet.css

@@ -1,4 +1,4 @@
-._17pa72a0-3-0-1 {
+._17pa72a0-3-1-1 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
@@ -9,7 +9,7 @@
   overflow: auto;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._17pa72a1-3-0-1 {
+._17pa72a1-3-1-1 {
   position: sticky;
   display: flex;
   align-self: stretch;
@@ -18,9 +18,9 @@
   inset-block: 0;
   right: 0;
 }
-._17pa72a2-3-0-1 {
+._17pa72a2-3-1-1 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) 0;
 }
-._17pa72a3-3-0-1 {
+._17pa72a3-3-1-1 {
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) 0;
 }

package/esm/content/code-snippet/CodeSnippet.js

@@ -14,6 +14,9 @@ import { CopyIcon } from "@dynatrace/strato-icons";
 import { CodeHighlight } from "./CodeHighlight.js";
 import * as styles from "./CodeSnippet.sty.js";
 import { Button } from "../../buttons/button/Button.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { Tooltip } from "../../overlays/tooltip/Tooltip.js";
 const COMPONENT_NAME = "CodeSnippet";
 const CodeSnippet = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
@@ -35,6 +38,9 @@ const CodeSnippet = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     className: consumerClassName,
     ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
+  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   const showCopyAction = showCopyActionProp ?? allowCopyProp ?? true;
   const joinedChildren = useMemo(
     () => Array.isArray(children) ? children.join("") : children,
@@ -79,13 +85,15 @@ const CodeSnippet = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     "div",
     {
       ref: forwardedRef,
+      onCopy: copySelection,
+      className: clsx(consumerClassName, styles.wrapper),
+      style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      style: consumerStyle,
-      className: clsx(consumerClassName, styles.wrapper),
-      onCopy: copySelection,
-      ...remainingProps,
+      ...ariaLabelingProps,
+      ...behavioralTrackingProps,
+      ...forwardProps,
       "data-dt-component": COMPONENT_NAME,
       children: [
         /* @__PURE__ */ jsx(

package/esm/content/code-snippet/CodeSnippet.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/code-snippet/CodeSnippet.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport writeText from 'copy-to-clipboard';\nimport {\n  type ClipboardEventHandler,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport { CopyIcon } from '@dynatrace/strato-icons';\n\nimport { CodeHighlight } from './CodeHighlight.js';\nimport * as styles from './CodeSnippet.sty.js';\nimport type { HighlightLanguage } from './HighlightExtended.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\nconst COMPONENT_NAME = 'CodeSnippet';\n\n/**\n * @public\n */\nexport interface CodeSnippetProps\n  extends WithChildren,\n    FocusEvents,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Code language to be used to run highlighting on the given code.\n   */\n  language?: HighlightLanguage;\n  /**\n   * Whether the copy button should be displayed.\n   * @defaultValue true\n   * @deprecated Will be removed. Use 'showCopyAction' instead\n   */\n  allowCopy?: boolean;\n  /**\n   * Whether the copy button should be displayed.\n   * @defaultValue true\n   */\n  showCopyAction?: boolean;\n  /**\n   * Whether line numbers should be shown.\n   * @defaultValue true\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Height of the code container. If this is known in advance, then very long\n   * code snippets will still be able to fit into the container while also\n   * having scrolling enabled. Value is given in px.\n   */\n  maxHeight?: number;\n  /**\n   * Whether the content breaks into new lines automatically or not.\n   * @defaultValue false\n   */\n  lineBreaks?: boolean;\n  /**\n   * Callback fired when copy button is clicked and the code snippet was copied.\n   */\n  onCopy?: () => void;\n\n  /**\n   * CodeSnippet layout size, 'default' for standard spacing and 'condensed' for reduced font size, padding and margins.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n}\n\n/**\n * Use the `CodeSnippet` to display a code block in a read-only context.\n * By default, the code is formatted but not highlighted.\n * @public\n */\nexport const CodeSnippet = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  CodeSnippetProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    language,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    allowCopy: allowCopyProp,\n    showCopyAction: showCopyActionProp,\n    showLineNumbers = true,\n    lineBreaks = false,\n    maxHeight,\n    onCopy,\n    size = 'default',\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    style: consumerStyle,\n    className: consumerClassName,\n    ...remainingProps\n  } = props;\n\n  const showCopyAction = showCopyActionProp ?? allowCopyProp ?? true;\n\n  const joinedChildren = useMemo(\n    () => (Array.isArray(children) ? children.join('') : children),\n    [children],\n  );\n\n  const copyText = `${joinedChildren?.toString() ?? ''}`;\n\n  const [hasCopied, setHasCopied] = useState(false);\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const intl = useIntl();\n\n  const handleCopy = async () => {\n    writeText(copyText, { format: 'text/plain' });\n    setHasCopied(true);\n    setIsTooltipOpen(true);\n    onCopy?.();\n  };\n\n  const copySelection: ClipboardEventHandler<HTMLDivElement> = useCallback(\n    (event) => {\n      const selection = document.getSelection();\n      if (selection === null) {\n        return;\n      }\n      // Firefox tends to add a new line separator per div (with user-select: none; css style rule)\n      // in the selection if the selection spans multiple divs (one div per line).\n      // See https://bugzilla.mozilla.org/show_bug.cgi?id=1273836\n      event.clipboardData.setData('text/plain', selection.toString());\n      event.preventDefault();\n    },\n    [],\n  );\n\n  const copyLabel = intl.formatMessage({\n    defaultMessage: 'Copy',\n    id: 'Yi8j4dchtpkwn/OB',\n    description: 'Shown for elements that trigger a copy to clipboard',\n  });\n\n  const copiedLabel = intl.formatMessage({\n    defaultMessage: 'Copied',\n    id: 'THNwSvfvDSXAUapi',\n    description: 'Shown after copying to clipboard',\n  });\n\n  const message = useMemo(() => {\n    return hasCopied ? copiedLabel : copyLabel;\n  }, [hasCopied, copiedLabel, copyLabel]);\n\n  const codeHighlightRef = useRef<HTMLPreElement | null>(null);\n\n  return (\n    <div\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      style={consumerStyle}\n      className={clsx(consumerClassName, styles.wrapper)}\n      onCopy={copySelection}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <CodeHighlight\n        ref={codeHighlightRef}\n        language={language}\n        code={copyText}\n        showLineNumbers={showLineNumbers}\n        lineBreaks={lineBreaks}\n        buttonPadding={showCopyAction}\n        maxHeight={maxHeight}\n        size={size}\n      />\n      {showCopyAction ? (\n        <div className={styles.copyButtonContainer({ size })}>\n          <Tooltip\n            text={message}\n            placement=\"top\"\n            open={isTooltipOpen}\n            delay=\"none\"\n            onOpenChange={(isOpen) => {\n              setIsTooltipOpen(isOpen);\n              if (!isOpen) {\n                setHasCopied(false);\n              }\n            }}\n          >\n            <Button\n              variant=\"default\"\n              size={size}\n              aria-label={copyLabel}\n              onClick={handleCopy}\n              style={{ borderRadius: Borders.Radius.Field.Subdued }}\n            >\n              <Button.Prefix>\n                <CopyIcon />\n              </Button.Prefix>\n            </Button>\n          </Tooltip>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\n(CodeSnippet as typeof CodeSnippet & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport writeText from 'copy-to-clipboard';\nimport {\n  type ClipboardEventHandler,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport { CopyIcon } from '@dynatrace/strato-icons';\n\nimport { CodeHighlight } from './CodeHighlight.js';\nimport * as styles from './CodeSnippet.sty.js';\nimport type { HighlightLanguage } from './HighlightExtended.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } 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 { FocusEvents } from '../../core/types/events.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\nconst COMPONENT_NAME = 'CodeSnippet';\n\n/**\n * @public\n */\nexport interface CodeSnippetProps\n  extends WithChildren,\n    FocusEvents,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Code language to be used to run highlighting on the given code.\n   */\n  language?: HighlightLanguage;\n  /**\n   * Whether the copy button should be displayed.\n   * @defaultValue true\n   * @deprecated Will be removed. Use 'showCopyAction' instead\n   */\n  allowCopy?: boolean;\n  /**\n   * Whether the copy button should be displayed.\n   * @defaultValue true\n   */\n  showCopyAction?: boolean;\n  /**\n   * Whether line numbers should be shown.\n   * @defaultValue true\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Height of the code container. If this is known in advance, then very long\n   * code snippets will still be able to fit into the container while also\n   * having scrolling enabled. Value is given in px.\n   */\n  maxHeight?: number;\n  /**\n   * Whether the content breaks into new lines automatically or not.\n   * @defaultValue false\n   */\n  lineBreaks?: boolean;\n  /**\n   * Callback fired when copy button is clicked and the code snippet was copied.\n   */\n  onCopy?: () => void;\n\n  /**\n   * CodeSnippet layout size, 'default' for standard spacing and 'condensed' for reduced font size, padding and margins.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n}\n\n/**\n * Use the `CodeSnippet` to display a code block in a read-only context.\n * By default, the code is formatted but not highlighted.\n * @public\n */\nexport const CodeSnippet = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  CodeSnippetProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    language,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    allowCopy: allowCopyProp,\n    showCopyAction: showCopyActionProp,\n    showLineNumbers = true,\n    lineBreaks = false,\n    maxHeight,\n    onCopy,\n    size = 'default',\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    style: consumerStyle,\n    className: consumerClassName,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  const showCopyAction = showCopyActionProp ?? allowCopyProp ?? true;\n\n  const joinedChildren = useMemo(\n    () => (Array.isArray(children) ? children.join('') : children),\n    [children],\n  );\n\n  const copyText = `${joinedChildren?.toString() ?? ''}`;\n\n  const [hasCopied, setHasCopied] = useState(false);\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const intl = useIntl();\n\n  const handleCopy = async () => {\n    writeText(copyText, { format: 'text/plain' });\n    setHasCopied(true);\n    setIsTooltipOpen(true);\n    onCopy?.();\n  };\n\n  const copySelection: ClipboardEventHandler<HTMLDivElement> = useCallback(\n    (event) => {\n      const selection = document.getSelection();\n      if (selection === null) {\n        return;\n      }\n      // Firefox tends to add a new line separator per div (with user-select: none; css style rule)\n      // in the selection if the selection spans multiple divs (one div per line).\n      // See https://bugzilla.mozilla.org/show_bug.cgi?id=1273836\n      event.clipboardData.setData('text/plain', selection.toString());\n      event.preventDefault();\n    },\n    [],\n  );\n\n  const copyLabel = intl.formatMessage({\n    defaultMessage: 'Copy',\n    id: 'Yi8j4dchtpkwn/OB',\n    description: 'Shown for elements that trigger a copy to clipboard',\n  });\n\n  const copiedLabel = intl.formatMessage({\n    defaultMessage: 'Copied',\n    id: 'THNwSvfvDSXAUapi',\n    description: 'Shown after copying to clipboard',\n  });\n\n  const message = useMemo(() => {\n    return hasCopied ? copiedLabel : copyLabel;\n  }, [hasCopied, copiedLabel, copyLabel]);\n\n  const codeHighlightRef = useRef<HTMLPreElement | null>(null);\n\n  return (\n    <div\n      ref={forwardedRef}\n      onCopy={copySelection}\n      className={clsx(consumerClassName, styles.wrapper)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <CodeHighlight\n        ref={codeHighlightRef}\n        language={language}\n        code={copyText}\n        showLineNumbers={showLineNumbers}\n        lineBreaks={lineBreaks}\n        buttonPadding={showCopyAction}\n        maxHeight={maxHeight}\n        size={size}\n      />\n      {showCopyAction ? (\n        <div className={styles.copyButtonContainer({ size })}>\n          <Tooltip\n            text={message}\n            placement=\"top\"\n            open={isTooltipOpen}\n            delay=\"none\"\n            onOpenChange={(isOpen) => {\n              setIsTooltipOpen(isOpen);\n              if (!isOpen) {\n                setHasCopied(false);\n              }\n            }}\n          >\n            <Button\n              variant=\"default\"\n              size={size}\n              aria-label={copyLabel}\n              onClick={handleCopy}\n              style={{ borderRadius: Borders.Radius.Field.Subdued }}\n            >\n              <Button.Prefix>\n                <CopyIcon />\n              </Button.Prefix>\n            </Button>\n          </Tooltip>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\n(CodeSnippet as typeof CodeSnippet & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/code-snippet/CodeSnippet.sty.js

@@ -1,7 +1,7 @@
 import "./CodeSnippet.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var copyButtonContainer = _7a468({ defaultClassName: "_17pa72a1-3-0-1", variantClassNames: { size: { "default": "_17pa72a2-3-0-1", condensed: "_17pa72a3-3-0-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var wrapper = "_17pa72a0-3-0-1";
+var copyButtonContainer = _7a468({ defaultClassName: "_17pa72a1-3-1-1", variantClassNames: { size: { "default": "_17pa72a2-3-1-1", condensed: "_17pa72a3-3-1-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var wrapper = "_17pa72a0-3-1-1";
 export {
   copyButtonContainer,
   wrapper

package/esm/content/code-snippet/CodeSnippet.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/code-snippet/CodeSnippet.css.ts"],
-  "sourcesContent": ["import './CodeSnippet.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var copyButtonContainer = _7a468({defaultClassName:'_17pa72a1-3-0-1',variantClassNames:{size:{'default':'_17pa72a2-3-0-1',condensed:'_17pa72a3-3-0-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var wrapper = '_17pa72a0-3-0-1';"],
+  "sourcesContent": ["import './CodeSnippet.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var copyButtonContainer = _7a468({defaultClassName:'_17pa72a1-3-1-1',variantClassNames:{size:{'default':'_17pa72a2-3-1-1',condensed:'_17pa72a3-3-1-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var wrapper = '_17pa72a0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7M,IAAI,UAAU;",
   "names": []
 }

package/esm/content/empty-state/EmptyState.css

@@ -1,104 +1,104 @@
-._1os652u1-3-0-1 {
+._1os652u1-3-1-1 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u2-3-0-1 {
+._1os652u2-3-1-1 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u3-3-0-1 {
+._1os652u3-3-1-1 {
   justify-content: center;
   align-items: center;
   flex-direction: row-reverse;
   gap: var(--dt-spacings-size-64, 64px);
 }
-._1os652u4-3-0-1 {
+._1os652u4-3-1-1 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u1-3-0-1 ._1os652u5-3-0-1 {
+._1os652u1-3-1-1 ._1os652u5-3-1-1 {
   margin-bottom: var(--dt-spacings-size-8, 8px);
   height: 128px;
   width: 128px;
 }
-._1os652u2-3-0-1 ._1os652u5-3-0-1 {
+._1os652u2-3-1-1 ._1os652u5-3-1-1 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
   height: 192px;
   width: 192px;
 }
-._1os652u3-3-0-1 ._1os652u5-3-0-1 {
+._1os652u3-3-1-1 ._1os652u5-3-1-1 {
   margin-bottom: var(--dt-spacings-size-0, 0);
   height: 320px;
   width: 320px;
 }
-._1os652u4-3-0-1 ._1os652u5-3-0-1 {
+._1os652u4-3-1-1 ._1os652u5-3-1-1 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
   height: 320px;
   width: 320px;
 }
-._1os652u1-3-0-1 ._1os652u6-3-0-1 {
+._1os652u1-3-1-1 ._1os652u6-3-1-1 {
   align-items: center;
 }
-._1os652u2-3-0-1 ._1os652u6-3-0-1 {
+._1os652u2-3-1-1 ._1os652u6-3-1-1 {
   align-items: center;
 }
-._1os652u3-3-0-1 ._1os652u6-3-0-1 {
+._1os652u3-3-1-1 ._1os652u6-3-1-1 {
   align-items: flex-start;
 }
-._1os652u4-3-0-1 ._1os652u6-3-0-1 {
+._1os652u4-3-1-1 ._1os652u6-3-1-1 {
   align-items: center;
 }
-._1os652u1-3-0-1 ._1os652u7-3-0-1 {
+._1os652u1-3-1-1 ._1os652u7-3-1-1 {
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1os652u2-3-0-1 ._1os652u7-3-0-1 {
+._1os652u2-3-1-1 ._1os652u7-3-1-1 {
   margin-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1os652u3-3-0-1 ._1os652u7-3-0-1 {
+._1os652u3-3-1-1 ._1os652u7-3-1-1 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u4-3-0-1 ._1os652u7-3-0-1 {
+._1os652u4-3-1-1 ._1os652u7-3-1-1 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u1-3-0-1 ._1os652u8-3-0-1 {
+._1os652u1-3-1-1 ._1os652u8-3-1-1 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-0-1 ._1os652u8-3-0-1 {
+._1os652u2-3-1-1 ._1os652u8-3-1-1 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u3-3-0-1 ._1os652u8-3-0-1 {
+._1os652u3-3-1-1 ._1os652u8-3-1-1 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-0-1 ._1os652u8-3-0-1 {
+._1os652u4-3-1-1 ._1os652u8-3-1-1 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u1-3-0-1 ._1os652u9-3-0-1 {
+._1os652u1-3-1-1 ._1os652u9-3-1-1 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-0-1 ._1os652u9-3-0-1 {
+._1os652u2-3-1-1 ._1os652u9-3-1-1 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u3-3-0-1 ._1os652u9-3-0-1 {
+._1os652u3-3-1-1 ._1os652u9-3-1-1 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-0-1 ._1os652u9-3-0-1 {
+._1os652u4-3-1-1 ._1os652u9-3-1-1 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u1-3-0-1 ._1os652ua-3-0-1 {
+._1os652u1-3-1-1 ._1os652ua-3-1-1 {
   margin-top: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-0-1 ._1os652ua-3-0-1 {
+._1os652u2-3-1-1 ._1os652ua-3-1-1 {
   margin-top: var(--dt-spacings-size-16, 16px);
 }
-._1os652u3-3-0-1 ._1os652ua-3-0-1 {
+._1os652u3-3-1-1 ._1os652ua-3-1-1 {
   margin-top: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-0-1 ._1os652ua-3-0-1 {
+._1os652u4-3-1-1 ._1os652ua-3-1-1 {
   margin-top: var(--dt-spacings-size-32, 32px);
 }

package/esm/content/empty-state/EmptyState.js

@@ -10,6 +10,9 @@ import { Footer } from "./slot-components/Footer.js";
 import { Title } from "./slot-components/Title.js";
 import { Visual } from "./slot-components/Visual.js";
 import { VisualPreset } from "./slot-components/VisualPreset.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
 import { Divider } from "../../layouts/divider/Divider.js";
 import { Flex } from "../../layouts/flex/Flex.js";
@@ -23,8 +26,12 @@ const BaseEmptyState = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     style: consumerStyle,
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow
+    "data-dtrum-allow": dataDtrumAllow,
+    ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
+  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   const [slots] = useSlots(children, {
     Actions,
     Details,
@@ -53,11 +60,14 @@ const BaseEmptyState = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       size,
       ref: forwardedRef,
       className: consumerClassName,
+      style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      ...ariaLabelingProps,
+      ...behavioralTrackingProps,
+      ...forwardProps,
       "data-dt-component": COMPONENT_NAME,
-      style: consumerStyle,
       children: [
         visualSlot,
         /* @__PURE__ */ jsxs(