@dynatrace/strato-components 3.7.0 → 3.8.0

package/content/chip-group/ChipGroup.js

@@ -33,6 +33,7 @@ module.exports = __toCommonJS(ChipGroup_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_chip_group_utils = require("./chip-group-utils.js");
 var import_ChipGroup_css = require("./ChipGroup.sty.js");
 var import_ChipGroupContext = require("./contexts/ChipGroupContext.js");
 var import_InternalChipGroupContext = require("./contexts/InternalChipGroupContext.js");
@@ -87,65 +88,48 @@ const RootChipGroup = (0, import_react.forwardRef)(
     const [hiddenChips, setHiddenChips] = (0, import_react.useState)([]);
     const [visibleChips, setVisibleChips] = (0, import_react.useState)([]);
     (0, import_react.useEffect)(() => {
-      const chips = Object.entries(state.chips);
-      const chipKeys = chips.map(([uniqueChipKey]) => uniqueChipKey);
-      if (chips.length === 0) {
+      const chipEntries = Object.entries(state.chips);
+      const chipEntriesKeys = chipEntries.map(
+        ([uniqueChipKey]) => uniqueChipKey
+      );
+      if (chipEntries.length === 0) {
         setVisibleChips([]);
         return;
       }
-      if (chips.some(([, chip]) => !chip.width)) {
+      if (chipEntries.some(([, chip]) => !chip.width)) {
         return;
       }
       if (expanded) {
         setHiddenChips([]);
-        setVisibleChips(chipKeys);
-        if (!containerRef.current?.firstChild) {
-          setAllChipsFit(true);
+        setVisibleChips(chipEntriesKeys);
+        if (expandedProp !== void 0) {
+          setAllChipsFit(false);
           return;
         }
-        let wrap = false;
-        let child = containerRef.current.firstChild;
-        const rafId = requestAnimationFrame(() => {
-          do {
-            if (child.classList.contains("chip") && child.offsetTop > 0) {
-              wrap = true;
-            }
-            child = child.nextSibling;
-          } while (!wrap && child);
-          setAllChipsFit(!wrap);
-          setTimeout(() => {
-            const controlButton = containerRef.current?.querySelector(
-              `button[aria-controls="${uniqueId}"]`
-            );
-            if (controlButton) {
-              controlButton.focus();
-            }
-          }, 0);
-        });
-        return () => {
-          cancelAnimationFrame(rafId);
-        };
-      }
-      const spacing = size === "condensed" ? 6 : 8;
-      let totalChipsWidth = 0;
-      let setHidden = true;
-      let _hiddenChipsIndex = chips.length;
-      for (const [index, [, value]] of Array.from(chips).entries()) {
-        totalChipsWidth += value.width || 0;
-        const chipFits = index === 0 || Math.floor(totalChipsWidth + index * spacing) <= Math.round(containerWidth);
-        const chipAndControlFits = index === 0 || totalChipsWidth + (index + 1) * spacing + (state.control?.width || 0) <= containerWidth;
-        const visible = index === chips.length - 1 && (state.control?.show ?? "auto") === "auto" ? chipFits : chipAndControlFits;
-        if (!visible && setHidden) {
-          setHidden = false;
-          _hiddenChipsIndex = index;
-        }
+        setAllChipsFit(
+          (0, import_chip_group_utils.computeAllChipsFitExpanded)(
+            chipEntries,
+            containerWidth,
+            size,
+            state.control?.width ?? 0,
+            state.control?.show,
+            maxVisibleChips
+          )
+        );
+        return;
       }
-      const effectiveHiddenChipsIndex = maxVisibleChips !== "auto" && maxVisibleChips >= 0 ? Math.min(_hiddenChipsIndex, maxVisibleChips) : _hiddenChipsIndex;
-      const allFit = effectiveHiddenChipsIndex === chips.length;
-      setAllChipsFit(allFit);
-      setHiddenChips(chipKeys.slice(effectiveHiddenChipsIndex));
-      setVisibleChips(chipKeys.slice(0, effectiveHiddenChipsIndex));
-    }, [containerWidth, expanded, size, state, maxVisibleChips, uniqueId]);
+      const fittingIndex = (0, import_chip_group_utils.findOverflowChipIndex)(
+        chipEntries,
+        containerWidth,
+        size,
+        state.control?.width || 0,
+        state.control?.show
+      );
+      const effectiveHiddenChipsIndex = maxVisibleChips !== "auto" && maxVisibleChips >= 0 ? Math.min(fittingIndex, maxVisibleChips) : fittingIndex;
+      setAllChipsFit(effectiveHiddenChipsIndex === chipEntries.length);
+      setHiddenChips(chipEntriesKeys.slice(effectiveHiddenChipsIndex));
+      setVisibleChips(chipEntriesKeys.slice(0, effectiveHiddenChipsIndex));
+    }, [containerWidth, expanded, expandedProp, size, state, maxVisibleChips]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ChipGroupContext.ChipGroupContext.Provider,
       {

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

@@ -22,4 +22,4 @@ __export(ChipGroup_css_exports, {
 module.exports = __toCommonJS(ChipGroup_css_exports);
 var import_ChipGroup_css_ts_vanilla = require("./ChipGroup.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chipGroupCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dwt8fp0-3-7-0", variantClassNames: { size: { condensed: "_dwt8fp1-3-7-0", "default": "_dwt8fp2-3-7-0" }, expanded: { true: "_dwt8fp3-3-7-0", false: "_dwt8fp4-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var chipGroupCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dwt8fp0-3-8-0", variantClassNames: { size: { condensed: "_dwt8fp1-3-8-0", "default": "_dwt8fp2-3-8-0" }, expanded: { true: "_dwt8fp3-3-8-0", false: "_dwt8fp4-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });

package/content/chip-group/Control.css

@@ -1,4 +1,4 @@
-._uoyq2d0-3-7-0 {
+._uoyq2d0-3-8-0 {
   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-7-0:hover {
+._uoyq2d0-3-8-0:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._uoyq2d0-3-7-0:active {
+._uoyq2d0-3-8-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._uoyq2d1-3-7-0 {
+._uoyq2d1-3-8-0 {
   text-decoration: none;
 }

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

@@ -22,4 +22,4 @@ __export(Control_css_exports, {
 module.exports = __toCommonJS(Control_css_exports);
 var import_Control_css_ts_vanilla = require("./Control.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var expandButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uoyq2d0-3-7-0", variantClassNames: { isFocusVisible: { true: "_uoyq2d1-3-7-0", false: "_uoyq2d2-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var expandButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uoyq2d0-3-8-0", variantClassNames: { isFocusVisible: { true: "_uoyq2d1-3-8-0", false: "_uoyq2d2-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });

package/content/chip-group/chip-group-utils.d.ts

@@ -0,0 +1,33 @@
+import type { Chip } from './state/chip-group-state-reducer.js';
+import type { ChipOwnProps } from '../chip/types/chip.js';
+/**
+ * Iterates over measured chips and returns the index of the first chip that no longer fits
+ * in the container (i.e. the cutoff between visible and hidden). Returns `chips.length` if
+ * all chips fit on one line.
+ * The first chip is always considered visible regardless of container width.
+ *
+ * @param chipEntries - chip entries derived from state.chips
+ * @param containerWidth - Width of the chip group container.
+ * @param chipSize - The size of the spacing and chips in the group
+ * @param controlWidth - Pixel width of the "Show more / Show less" control button, or `0` when no control is mounted.
+ * @param controlShow - Whether the control's visibility is managed automatically (`'auto'`) or is always present (`'always'`).
+ */
+export declare function findOverflowChipIndex(chipEntries: Array<[string, Chip]>, containerWidth: number, chipSize: ChipOwnProps['size'], controlWidth: number, controlShow: 'auto' | 'always' | undefined): number;
+/**
+ * Determines whether an expanded chip group still needs its auto control, i.e. whether all
+ * chips fit on a single line. Computed synchronously from the measured chip widths rather
+ * than from the rendered DOM.
+ *
+ * All chips fit only when:
+ * - their combined width (including flex gaps, and the control's width when it is always
+ *   shown) fits within the container, AND
+ * - no explicit `maxVisibleChips` limit would still hide some chips after collapsing.
+ *
+ * @param chipEntries - chip entries derived from state.chips
+ * @param containerWidth - Width of the chip group container.
+ * @param chipSize - The size of the spacing and chips in the group
+ * @param controlWidth - Pixel width of the "Show more / Show less" control button, or `0` when no control is mounted.
+ * @param controlShow - Whether the control's visibility is managed automatically (`'auto'`) or is always present (`'always'`).
+ * @param maxVisibleChips - Maximum number of chips to keep visible when collapsed, or `'auto'`.
+ */
+export declare function computeAllChipsFitExpanded(chipEntries: Array<[string, Chip]>, containerWidth: number, chipSize: ChipOwnProps['size'], controlWidth: number, controlShow: 'auto' | 'always' | undefined, maxVisibleChips: 'auto' | number): boolean;

package/content/chip-group/chip-group-utils.js

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var chip_group_utils_exports = {};
+__export(chip_group_utils_exports, {
+  computeAllChipsFitExpanded: () => computeAllChipsFitExpanded,
+  findOverflowChipIndex: () => findOverflowChipIndex
+});
+module.exports = __toCommonJS(chip_group_utils_exports);
+function findOverflowChipIndex(chipEntries, containerWidth, chipSize, controlWidth, controlShow) {
+  let totalChipsWidth = 0;
+  const spacing = getFlexGapByChipSize(chipSize);
+  for (const [index, [, value]] of chipEntries.entries()) {
+    totalChipsWidth += value.width || 0;
+    const chipFits = index === 0 || Math.floor(totalChipsWidth + index * spacing) <= Math.round(containerWidth);
+    const chipAndControlFits = index === 0 || totalChipsWidth + (index + 1) * spacing + controlWidth <= containerWidth;
+    const visible = index === chipEntries.length - 1 && (controlShow ?? "auto") === "auto" ? chipFits : chipAndControlFits;
+    if (!visible) {
+      return index;
+    }
+  }
+  return chipEntries.length;
+}
+function computeAllChipsFitExpanded(chipEntries, containerWidth, chipSize, controlWidth, controlShow, maxVisibleChips) {
+  const spacing = getFlexGapByChipSize(chipSize);
+  const totalWidth = chipEntries.reduce(
+    (sum, [, chip]) => sum + (chip.width ?? 0),
+    0
+  );
+  const hasBindingLimit = maxVisibleChips !== "auto" && maxVisibleChips >= 0 && maxVisibleChips < chipEntries.length;
+  const controlReservedWidth = controlShow === "always" ? controlWidth + spacing : 0;
+  return !hasBindingLimit && Math.floor(
+    totalWidth + (chipEntries.length - 1) * spacing + controlReservedWidth
+  ) <= Math.round(containerWidth);
+}
+function getFlexGapByChipSize(chipSize) {
+  return chipSize === "condensed" ? 6 : 8;
+}

package/content/chip-group/state/chip-group-state-reducer.d.ts

@@ -1,4 +1,4 @@
-type Chip = {
+export type Chip = {
     /** Width of the chip. */
     width?: number;
 };

package/content/code-snippet/CodeHighlight.css

@@ -1,27 +1,26 @@
-._1jmxup80-3-7-0 {
+._1jmxup81-3-8-0 {
   margin: 0;
   padding: 0;
   overflow: visible;
   box-sizing: border-box;
   tab-size: 2;
-  background-color: var(--dt-colors-background-surface-default, #fff);
   flex: 1;
   font-weight: var(--dt-typography-code-base-default-weight, 400);
   word-break: break-word;
 }
-._1jmxup81-3-7-0 {
+._1jmxup82-3-8-0 {
   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-7-0 {
+._1jmxup83-3-8-0 {
   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-7-0 {
+._1jmxup84-3-8-0 {
   display: table-cell;
   position: sticky;
   left: 0;
@@ -33,75 +32,75 @@
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   user-select: none;
 }
-._1jgl8s50-3-7-0 ._1jmxup83-3-7-0 {
+._1jgl8s50-3-8-0 ._1jmxup84-3-8-0 {
   border-right-width: var(--dt-borders-width-default, 1px);
 }
-._1jmxup84-3-7-0 {
+._1jmxup85-3-8-0 {
   white-space: nowrap;
 }
-._1jmxup85-3-7-0 {
+._1jmxup86-3-8-0 {
   white-space: pre;
 }
-._1jmxup86-3-7-0 {
+._1jmxup87-3-8-0 {
   display: table-row;
 }
-._1jmxup87-3-7-0 {
+._1jmxup88-3-8-0 {
   display: block;
   box-sizing: border-box;
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
 }
-._1jmxup87-3-7-0::before {
+._1jmxup88-3-8-0::before {
   content: attr(data-linenumber);
 }
-._1jmxup81-3-7-0 ._1jmxup86-3-7-0:first-child ._1jmxup87-3-7-0 {
+._1jmxup82-3-8-0 ._1jmxup87-3-8-0:first-child ._1jmxup88-3-8-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-7-0 ._1jmxup86-3-7-0:first-child ._1jmxup87-3-7-0 {
+._1jmxup83-3-8-0 ._1jmxup87-3-8-0:first-child ._1jmxup88-3-8-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-7-0 ._1jmxup86-3-7-0:last-child ._1jmxup87-3-7-0 {
+._1jmxup82-3-8-0 ._1jmxup87-3-8-0:last-child ._1jmxup88-3-8-0 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-7-0 ._1jmxup86-3-7-0:last-child ._1jmxup87-3-7-0 {
+._1jmxup83-3-8-0 ._1jmxup87-3-8-0:last-child ._1jmxup88-3-8-0 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup88-3-7-0 {
+._1jmxup89-3-8-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   min-width: 33px;
 }
-._1jmxup89-3-7-0 {
+._1jmxup8a-3-8-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   min-width: 27px;
 }
-._1jmxup8b-3-7-0 {
+._1jmxup8c-3-8-0 {
   white-space: pre;
 }
-._1jmxup8c-3-7-0 {
+._1jmxup8d-3-8-0 {
   display: table-cell;
   width: 100%;
 }
-._1jmxup81-3-7-0 ._1jmxup86-3-7-0:first-child ._1jmxup8c-3-7-0 {
+._1jmxup82-3-8-0 ._1jmxup87-3-8-0:first-child ._1jmxup8d-3-8-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-7-0 ._1jmxup86-3-7-0:first-child ._1jmxup8c-3-7-0 {
+._1jmxup83-3-8-0 ._1jmxup87-3-8-0:first-child ._1jmxup8d-3-8-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-7-0 ._1jmxup86-3-7-0:last-child ._1jmxup8c-3-7-0 {
+._1jmxup82-3-8-0 ._1jmxup87-3-8-0:last-child ._1jmxup8d-3-8-0 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-7-0 ._1jmxup86-3-7-0:last-child ._1jmxup8c-3-7-0 {
+._1jmxup83-3-8-0 ._1jmxup87-3-8-0:last-child ._1jmxup8d-3-8-0 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup8d-3-7-0 {
+._1jmxup8e-3-8-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._1jmxup8e-3-7-0 {
+._1jmxup8f-3-8-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup8g-3-7-0 {
+._1jmxup8h-3-8-0 {
   white-space: pre;
 }

package/content/code-snippet/CodeHighlight.sty.d.ts

@@ -1,3 +1,8 @@
+export declare const gutterColumnWidth: `var(--${string})`;
+export declare const lineNumberMinWidth: {
+    readonly default: "33px";
+    readonly condensed: "27px";
+};
 export declare const highlightWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         default: {
@@ -29,11 +34,11 @@ export declare const lineNumber: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         default: {
             paddingLeft: string;
-            minWidth: number;
+            minWidth: "33px";
         };
         condensed: {
             paddingLeft: string;
-            minWidth: number;
+            minWidth: "27px";
         };
     };
     multiLine: {

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

@@ -17,18 +17,22 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var CodeHighlight_css_exports = {};
 __export(CodeHighlight_css_exports, {
+  gutterColumnWidth: () => gutterColumnWidth,
   highlightWrapper: () => highlightWrapper,
   line: () => line,
   lineContent: () => lineContent,
   lineNumber: () => lineNumber,
-  lineNumberContainer: () => lineNumberContainer
+  lineNumberContainer: () => lineNumberContainer,
+  lineNumberMinWidth: () => lineNumberMinWidth
 });
 module.exports = __toCommonJS(CodeHighlight_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_CodeHighlight_css_ts_vanilla = require("./CodeHighlight.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup80-3-7-0", variantClassNames: { size: { "default": "_1jmxup81-3-7-0", condensed: "_1jmxup82-3-7-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var line = "_1jmxup86-3-7-0";
-var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup8c-3-7-0", variantClassNames: { size: { "default": "_1jmxup8d-3-7-0", condensed: "_1jmxup8e-3-7-0" }, multiLine: { false: "_1jmxup8f-3-7-0", true: "_1jmxup8g-3-7-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
-var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup87-3-7-0", variantClassNames: { size: { "default": "_1jmxup88-3-7-0", condensed: "_1jmxup89-3-7-0" }, multiLine: { false: "_1jmxup8a-3-7-0", true: "_1jmxup8b-3-7-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
-var lineNumberContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup83-3-7-0", variantClassNames: { multiLine: { false: "_1jmxup84-3-7-0", true: "_1jmxup85-3-7-0" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });
+var gutterColumnWidth = "var(--_1jmxup80-3-8-0)";
+var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup81-3-8-0", variantClassNames: { size: { "default": "_1jmxup82-3-8-0", condensed: "_1jmxup83-3-8-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var line = "_1jmxup87-3-8-0";
+var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup8d-3-8-0", variantClassNames: { size: { "default": "_1jmxup8e-3-8-0", condensed: "_1jmxup8f-3-8-0" }, multiLine: { false: "_1jmxup8g-3-8-0", true: "_1jmxup8h-3-8-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup88-3-8-0", variantClassNames: { size: { "default": "_1jmxup89-3-8-0", condensed: "_1jmxup8a-3-8-0" }, multiLine: { false: "_1jmxup8b-3-8-0", true: "_1jmxup8c-3-8-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumberContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup84-3-8-0", variantClassNames: { multiLine: { false: "_1jmxup85-3-8-0", true: "_1jmxup86-3-8-0" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });
+var lineNumberMinWidth = { "default": "33px", condensed: "27px" };

package/content/code-snippet/CodeSnippet.css

@@ -1,4 +1,4 @@
-._17pa72a0-3-7-0 {
+._17pa72a1-3-8-0 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
@@ -9,10 +9,36 @@
   overflow: auto;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-7-0 ._17pa72a0-3-7-0 {
+._1jgl8s50-3-8-0 ._17pa72a1-3-8-0 {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._17pa72a1-3-7-0 {
+._17pa72a2-3-8-0 {
+  min-height: 100%;
+  max-height: 100%;
+}
+._17pa72a3-3-8-0 {
+  --_17pa72a0-3-8-0: var(--dt-borders-width-emphasized, 2px);
+}
+._1jgl8s50-3-8-0 ._17pa72a3-3-8-0 {
+  --_17pa72a0-3-8-0: var(--dt-borders-width-default, 1px);
+}
+._17pa72a3-3-8-0::before {
+  content: "";
+  position: sticky;
+  left: 0;
+  flex-shrink: 0;
+  width: var(--_1jmxup80-3-8-0);
+  margin-right: calc(-1 * var(--_1jmxup80-3-8-0));
+  background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
+  box-shadow: inset calc(-1 * var(--_17pa72a0-3-8-0)) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._17pa72a4-3-8-0 {
+  --_1jmxup80-3-8-0: calc(33px + var(--dt-spacings-size-16, 16px) + var(--_17pa72a0-3-8-0));
+}
+._17pa72a5-3-8-0 {
+  --_1jmxup80-3-8-0: calc(27px + var(--dt-spacings-size-16, 16px) + var(--_17pa72a0-3-8-0));
+}
+._17pa72a6-3-8-0 {
   position: sticky;
   display: flex;
   align-self: stretch;
@@ -21,9 +47,9 @@
   inset-block: 0;
   right: 0;
 }
-._17pa72a2-3-7-0 {
+._17pa72a7-3-8-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) 0;
 }
-._17pa72a3-3-7-0 {
+._17pa72a8-3-8-0 {
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) 0;
 }

package/content/code-snippet/CodeSnippet.d.ts

@@ -7,9 +7,30 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
 import type { StylingProps } from '../../core/types/styling-props.js';
 import type { WithChildren } from '../../core/types/with-children.js';
 /**
+ * Props related to the height of the `CodeSnippet` component.
  * @public
  */
-export interface CodeSnippetProps extends WithChildren, FocusEvents, StylingProps, DataTestId, MaskingProps, AriaLabelingProps, BehaviorTrackingProps {
+export type CodeSnippetHeightProps = {
+    /**
+     * Height of the code container. If this is known in advance, then very long
+     * code snippets will still be able to fit into the container while also
+     * having scrolling enabled. Value is given in px.
+     */
+    maxHeight?: number;
+    fullHeight?: false;
+} | {
+    /**
+     * Whether the code snippet should take up the available height of its parent container.
+     * @defaultValue false
+     */
+    fullHeight: true;
+    maxHeight?: never;
+};
+/**
+ * Props for the `CodeSnippet` component.
+ * @public
+ */
+export type CodeSnippetProps = WithChildren & FocusEvents & StylingProps & DataTestId & MaskingProps & AriaLabelingProps & BehaviorTrackingProps & CodeSnippetHeightProps & {
     /**
      * Code language to be used to run highlighting on the given code.
      */
@@ -30,12 +51,6 @@ export interface CodeSnippetProps extends WithChildren, FocusEvents, StylingProp
      * @defaultValue true
      */
     showLineNumbers?: boolean;
-    /**
-     * Height of the code container. If this is known in advance, then very long
-     * code snippets will still be able to fit into the container while also
-     * having scrolling enabled. Value is given in px.
-     */
-    maxHeight?: number;
     /**
      * Whether the content breaks into new lines automatically or not.
      * @defaultValue false
@@ -50,7 +65,7 @@ export interface CodeSnippetProps extends WithChildren, FocusEvents, StylingProp
      * @defaultValue 'default'
      */
     size?: 'default' | 'condensed';
-}
+};
 /**
  * Use the `CodeSnippet` to display a code block in a read-only context.
  * By default, the code is formatted but not highlighted.

package/content/code-snippet/CodeSnippet.js

@@ -57,6 +57,7 @@ const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
     maxHeight,
     onCopy,
     size = "default",
+    fullHeight = false,
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
@@ -112,7 +113,10 @@ const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
     {
       ref: forwardedRef,
       onCopy: copySelection,
-      className: (0, import_clsx.default)(consumerClassName, styles.wrapper),
+      className: (0, import_clsx.default)(consumerClassName, styles.wrapper, {
+        [styles.wrapperFullHeight]: fullHeight,
+        [styles.wrapperGutter({ size })]: showLineNumbers
+      }),
       style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
@@ -153,7 +157,7 @@ const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
                 variant: "default",
                 size,
                 "aria-label": copyLabel,
-                onClick: handleCopy,
+                onClick: () => void handleCopy(),
                 style: { borderRadius: import_borders.default.Radius.Field.Subdued },
                 "data-dt-name": "Copy",
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CopyIcon, {}) })

package/content/code-snippet/CodeSnippet.sty.d.ts

@@ -1,4 +1,20 @@
+import { gutterColumnWidth } from './CodeHighlight.sty.js';
 export declare const wrapper: string;
+export declare const wrapperFullHeight: string;
+export declare const wrapperGutter: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        default: {
+            vars: {
+                [gutterColumnWidth]: string;
+            };
+        };
+        condensed: {
+            vars: {
+                [gutterColumnWidth]: string;
+            };
+        };
+    };
+}>;
 export declare const copyButtonContainer: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         default: {

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

@@ -18,11 +18,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var CodeSnippet_css_exports = {};
 __export(CodeSnippet_css_exports, {
   copyButtonContainer: () => copyButtonContainer,
-  wrapper: () => wrapper
+  wrapper: () => wrapper,
+  wrapperFullHeight: () => wrapperFullHeight,
+  wrapperGutter: () => wrapperGutter
 });
 module.exports = __toCommonJS(CodeSnippet_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
+var import_CodeHighlight_css_ts_vanilla = require("./CodeHighlight.css");
 var import_CodeSnippet_css_ts_vanilla = require("./CodeSnippet.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a1-3-7-0", variantClassNames: { size: { "default": "_17pa72a2-3-7-0", condensed: "_17pa72a3-3-7-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var wrapper = "_17pa72a0-3-7-0";
+var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a6-3-8-0", variantClassNames: { size: { "default": "_17pa72a7-3-8-0", condensed: "_17pa72a8-3-8-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var wrapper = "_17pa72a1-3-8-0";
+var wrapperFullHeight = "_17pa72a2-3-8-0";
+var wrapperGutter = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a3-3-8-0", variantClassNames: { size: { "default": "_17pa72a4-3-8-0", condensed: "_17pa72a5-3-8-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });