@wallarm-org/design-system 0.71.0 → 0.71.1

package/dist/components/ParameterPath/ParameterPath.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
 import { useControlled } from "../../hooks/index.js";
 import { cn } from "../../utils/cn.js";
 import { hasTextSelection } from "../../utils/hasTextSelection.js";
@@ -77,19 +78,18 @@ const ParameterPath = ({ ref, method, segments, encoding, attack = false, expand
                     "data-slot": "parameter-path",
                     "data-truncated": isTruncated || void 0,
                     "data-expanded": isExpanded || void 0,
-                    ref: ref,
+                    ref: composeRefs(ref, containerRef),
                     onCopy: handleCopy,
                     role: interactive ? 'button' : void 0,
                     tabIndex: interactive ? 0 : void 0,
                     "aria-expanded": interactive ? isExpanded : void 0,
                     onClick: interactive ? toggleExpanded : void 0,
                     onKeyDown: interactive ? handleKeyDown : void 0,
-                    className: cn('relative flex items-center min-w-0', interactive && 'cursor-pointer', className),
+                    className: cn('relative flex w-full items-center min-w-0', interactive && 'cursor-pointer', className),
                     children: /*#__PURE__*/ jsxs(TestIdProvider, {
                         value: testId,
                         children: [
                             /*#__PURE__*/ jsx(ParameterPathRow, {
-                                ref: containerRef,
                                 forMeasurement: false,
                                 isExpanded: isExpanded,
                                 indices: indices,

package/dist/components/ParameterPath/ParameterPathRow.js

@@ -42,17 +42,22 @@ const ParameterPathRow = ({ ref, method, segments, encoding, attack, forMeasurem
         "data-measure": measure(MEASURE.encoding),
         children: encoding
     }, "enc"));
-    if (forMeasurement) return /*#__PURE__*/ jsx("div", {
-        ref: ref,
-        "data-slot": "parameter-path-row",
-        "data-row": ROW.measure,
-        "aria-hidden": "true",
-        className: "flex items-center gap-0 absolute left-[-9999px] top-0 invisible pointer-events-none",
-        children: /*#__PURE__*/ jsx(TestIdProvider, {
-            value: void 0,
-            children: items
-        })
-    });
+    if (forMeasurement) {
+        items.push(/*#__PURE__*/ jsx(ParameterPathEllipsis, {
+            "data-measure": MEASURE.ellipsis
+        }, "measure-ellipsis"));
+        return /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            "data-slot": "parameter-path-row",
+            "data-row": ROW.measure,
+            "aria-hidden": "true",
+            className: "flex items-center gap-0 absolute left-[-9999px] top-0 invisible pointer-events-none",
+            children: /*#__PURE__*/ jsx(TestIdProvider, {
+                value: void 0,
+                children: items
+            })
+        });
+    }
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         "data-slot": "parameter-path-row",

package/dist/components/ParameterPath/constants.d.ts

@@ -3,6 +3,7 @@ export declare const MEASURE: {
     readonly joint: "joint";
     readonly segment: "segment";
     readonly encoding: "encoding";
+    readonly ellipsis: "ellipsis";
 };
 export declare const ROW: {
     readonly visible: "visible";

package/dist/components/ParameterPath/constants.js

@@ -2,7 +2,8 @@ const MEASURE = {
     method: 'method',
     joint: 'joint',
     segment: 'segment',
-    encoding: 'encoding'
+    encoding: 'encoding',
+    ellipsis: 'ellipsis'
 };
 const ROW = {
     visible: 'visible',

package/dist/components/ParameterPath/useParameterPathTruncation.d.ts

@@ -5,12 +5,14 @@ interface ComputeArgs {
     encodingWidth: number;
     segmentWidths: number[];
     jointsWidth: number;
+    jointWidth: number;
+    ellipsisWidth: number;
 }
 interface TruncationResult {
     isTruncated: boolean;
     visibleSegmentIndices: number[];
 }
-export declare const computeTruncation: ({ containerWidth, methodWidth, encodingWidth, segmentWidths, jointsWidth, }: ComputeArgs) => TruncationResult;
+export declare const computeTruncation: ({ containerWidth, methodWidth, encodingWidth, segmentWidths, jointsWidth, jointWidth, ellipsisWidth, }: ComputeArgs) => TruncationResult;
 interface UseTruncationArgs {
     containerRef: RefObject<HTMLElement | null>;
     measurementRef: RefObject<HTMLElement | null>;

package/dist/components/ParameterPath/useParameterPathTruncation.js

@@ -2,7 +2,8 @@ import { useLayoutEffect, useState } from "react";
 import { range } from "../../utils/range.js";
 import { useContainerWidth } from "../Table/lib/useContainerWidth.js";
 import { MEASURE } from "./constants.js";
-const computeTruncation = ({ containerWidth, methodWidth, encodingWidth, segmentWidths, jointsWidth })=>{
+const EPSILON = 1;
+const computeTruncation = ({ containerWidth, methodWidth, encodingWidth, segmentWidths, jointsWidth, jointWidth, ellipsisWidth })=>{
     const segCount = segmentWidths.length;
     const allIndices = range(segCount);
     if (segCount <= 2 || containerWidth <= 0) return {
@@ -10,7 +11,13 @@ const computeTruncation = ({ containerWidth, methodWidth, encodingWidth, segment
         visibleSegmentIndices: allIndices
     };
     const totalWidth = methodWidth + encodingWidth + segmentWidths.reduce((acc, w)=>acc + w, 0) + jointsWidth;
-    if (totalWidth <= containerWidth) return {
+    if (totalWidth <= containerWidth + EPSILON) return {
+        isTruncated: false,
+        visibleSegmentIndices: allIndices
+    };
+    const middleWidth = segmentWidths.slice(1, -1).reduce((acc, w)=>acc + w, 0) + (segCount - 3) * jointWidth;
+    const collapsedWidth = totalWidth - middleWidth + ellipsisWidth;
+    if (collapsedWidth + EPSILON >= totalWidth) return {
         isTruncated: false,
         visibleSegmentIndices: allIndices
     };
@@ -34,18 +41,22 @@ const useParameterPathTruncation = ({ containerRef, measurementRef, segmentCount
         if (!root) return;
         const methodEl = root.querySelector(`[data-measure="${MEASURE.method}"]`);
         const encodingEl = root.querySelector(`[data-measure="${MEASURE.encoding}"]`);
+        const ellipsisEl = root.querySelector(`[data-measure="${MEASURE.ellipsis}"]`);
         const jointEls = Array.from(root.querySelectorAll(`[data-measure="${MEASURE.joint}"]`));
         const segmentEls = Array.from(root.querySelectorAll(`[data-measure="${MEASURE.segment}"]`));
         const segmentWidths = segmentEls.map((el)=>el.getBoundingClientRect().width);
         const methodWidth = hasMethod && methodEl ? methodEl.getBoundingClientRect().width : 0;
         const encodingWidth = hasEncoding && encodingEl ? encodingEl.getBoundingClientRect().width : 0;
-        const jointsWidth = jointEls.reduce((acc, el)=>acc + el.getBoundingClientRect().width, 0);
+        const jointWidths = jointEls.map((el)=>el.getBoundingClientRect().width);
+        const jointsWidth = jointWidths.reduce((acc, w)=>acc + w, 0);
         const next = computeTruncation({
             containerWidth,
             methodWidth,
             encodingWidth,
             segmentWidths,
-            jointsWidth
+            jointsWidth,
+            jointWidth: jointWidths[0] ?? 0,
+            ellipsisWidth: ellipsisEl?.getBoundingClientRect().width ?? 0
         });
         setResult((prev)=>prev.isTruncated === next.isTruncated && indicesEqual(prev.visibleSegmentIndices, next.visibleSegmentIndices) ? prev : next);
     }, [

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.70.0",
-  "generatedAt": "2026-07-02T11:59:11.867Z",
+  "version": "0.71.0",
+  "generatedAt": "2026-07-02T15:16:13.659Z",
   "components": [
     {
       "name": "Accordion",
@@ -44886,6 +44886,10 @@
         },
         {
           "name": "ExpandableTruncated",
+          "code": "() => (\n  <div style={{ width: 600 }}>\n    {/* The root is w-full (it must span the available space to measure it),\n        so centering happens inside the component, not on the container. */}\n    <ParameterPath\n      className='justify-center'\n      method='POST'\n      segments={[\n        'multipart',\n        'json_abc',\n        'json_doc',\n        'qwerty_doc',\n        'hash',\n        'formData',\n        'session_token',\n        'nested_payload',\n        'get',\n      ]}\n      attack\n      expandable\n    />\n  </div>\n)"
+        },
+        {
+          "name": "ExpandableFitsInline",
           "code": "() => (\n  <div style={{ width: 720, display: 'flex', justifyContent: 'center' }}>\n    <ParameterPath\n      method='POST'\n      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}\n      attack\n      expandable\n    />\n  </div>\n)"
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.71.0",
+  "version": "0.71.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",