@wallarm-org/design-system 0.50.2 → 0.51.0

package/dist/components/ParameterPath/ParameterPath.js

@@ -1,17 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from "react";
+import { useControlled } from "../../hooks/index.js";
 import { cn } from "../../utils/cn.js";
+import { hasTextSelection } from "../../utils/hasTextSelection.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
 import { buildFullPathLabel } from "./buildFullPathLabel.js";
+import { EXPAND_KEYS } from "./constants.js";
 import { formatAsFilter } from "./formatAsFilter.js";
-import { ParameterPathEllipsis } from "./ParameterPathEllipsis.js";
-import { ParameterPathEncoding } from "./ParameterPathEncoding.js";
-import { ParameterPathJoint } from "./ParameterPathJoint.js";
-import { ParameterPathMethod } from "./ParameterPathMethod.js";
-import { ParameterPathSegment } from "./ParameterPathSegment.js";
+import { ParameterPathRow } from "./ParameterPathRow.js";
 import { useParameterPathTruncation } from "./useParameterPathTruncation.js";
-const ParameterPath = ({ ref, method, segments, encoding, attack = false, copyFormat = formatAsFilter, className, 'data-testid': testId, ...rest })=>{
+const ParameterPath = ({ ref, method, segments, encoding, attack = false, expandable = false, expanded, defaultExpanded = false, onExpandedChange, copyFormat = formatAsFilter, className, 'data-testid': testId, ...rest })=>{
+    const [expandedState, setExpandedUncontrolled] = useControlled({
+        controlled: expanded,
+        default: defaultExpanded
+    });
+    const setExpanded = useCallback((next)=>{
+        setExpandedUncontrolled(next);
+        onExpandedChange?.(next);
+    }, [
+        setExpandedUncontrolled,
+        onExpandedChange
+    ]);
     const handleCopy = useCallback((event)=>{
         const text = copyFormat({
             method,
@@ -36,63 +46,28 @@ const ParameterPath = ({ ref, method, segments, encoding, attack = false, copyFo
         hasMethod: Boolean(method),
         hasEncoding: Boolean(encoding)
     });
-    const lastIndex = segments.length - 1;
-    const indices = isTruncated && segments.length > 2 ? visibleSegmentIndices : null;
-    const renderRow = (forMeasurement)=>{
-        const visibleIdx = forMeasurement || null === indices ? Array.from({
-            length: segments.length
-        }, (_, i)=>i) : indices;
-        const items = [];
-        const measure = (slot)=>forMeasurement ? slot : void 0;
-        if (method) items.push(/*#__PURE__*/ jsx(ParameterPathMethod, {
-            method: method,
-            "data-measure": measure('method')
-        }, "method"));
-        visibleIdx.forEach((segIndex, position)=>{
-            const value = segments[segIndex];
-            if (void 0 === value) return;
-            const isLast = segIndex === lastIndex;
-            const isFirstShown = 0 === position;
-            const showJointBefore = !(isFirstShown && !method);
-            if (showJointBefore) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {
-                "data-measure": measure('joint')
-            }, `j-${segIndex}-pre`));
-            const isCollapsedBoundary = !forMeasurement && null !== indices && 0 === position && 2 === visibleIdx.length;
-            items.push(/*#__PURE__*/ jsx(ParameterPathSegment, {
-                index: segIndex,
-                variant: isLast ? 'highlighted' : 'default',
-                withZap: isLast && attack,
-                "data-measure": measure('segment'),
-                children: value
-            }, `s-${segIndex}`));
-            if (isCollapsedBoundary) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {}, "ellipsis-joint-pre"), /*#__PURE__*/ jsx(ParameterPathEllipsis, {}, "ellipsis"));
-        });
-        if (encoding) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {
-            "data-measure": measure('joint')
-        }, "enc-joint"), /*#__PURE__*/ jsx(ParameterPathEncoding, {
-            "data-measure": measure('encoding'),
-            children: encoding
-        }, "enc"));
-        return items;
-    };
-    const visibleRow = /*#__PURE__*/ jsx("div", {
-        ref: containerRef,
-        "data-row": "visible",
-        className: "flex items-center gap-0 min-w-0 overflow-hidden",
-        children: renderRow(false)
-    });
-    const measurementRow = /*#__PURE__*/ jsx("div", {
-        ref: measurementRef,
-        "data-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: renderRow(true)
-        })
-    });
+    const collapsible = isTruncated && segments.length > 2;
+    const isExpanded = Boolean(expandedState) && collapsible;
+    const interactive = expandable && collapsible;
+    const indices = collapsible && !isExpanded ? visibleSegmentIndices : null;
+    const toggleExpanded = useCallback(()=>{
+        if (hasTextSelection()) return;
+        setExpanded(!isExpanded);
+    }, [
+        isExpanded,
+        setExpanded
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        if (EXPAND_KEYS.includes(event.key)) {
+            event.preventDefault();
+            setExpanded(!isExpanded);
+        }
+    }, [
+        isExpanded,
+        setExpanded
+    ]);
     return /*#__PURE__*/ jsxs(Tooltip, {
-        disabled: !isTruncated,
+        disabled: !isTruncated || isExpanded,
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
                 asChild: true,
@@ -101,14 +76,37 @@ const ParameterPath = ({ ref, method, segments, encoding, attack = false, copyFo
                     "data-testid": testId,
                     "data-slot": "parameter-path",
                     "data-truncated": isTruncated || void 0,
+                    "data-expanded": isExpanded || void 0,
                     ref: ref,
                     onCopy: handleCopy,
-                    className: cn('relative flex items-center min-w-0', className),
+                    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),
                     children: /*#__PURE__*/ jsxs(TestIdProvider, {
                         value: testId,
                         children: [
-                            visibleRow,
-                            measurementRow
+                            /*#__PURE__*/ jsx(ParameterPathRow, {
+                                ref: containerRef,
+                                forMeasurement: false,
+                                isExpanded: isExpanded,
+                                indices: indices,
+                                method: method,
+                                segments: segments,
+                                encoding: encoding,
+                                attack: attack
+                            }),
+                            /*#__PURE__*/ jsx(ParameterPathRow, {
+                                ref: measurementRef,
+                                forMeasurement: true,
+                                indices: null,
+                                method: method,
+                                segments: segments,
+                                encoding: encoding,
+                                attack: attack
+                            })
                         ]
                     })
                 })

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

@@ -0,0 +1,14 @@
+import type { FC, Ref } from 'react';
+import type { HttpMethodName } from '../HttpMethod';
+interface ParameterPathRowProps {
+    ref?: Ref<HTMLDivElement>;
+    method?: HttpMethodName;
+    segments: string[];
+    encoding?: string;
+    attack: boolean;
+    forMeasurement: boolean;
+    indices: number[] | null;
+    isExpanded?: boolean;
+}
+export declare const ParameterPathRow: FC<ParameterPathRowProps>;
+export {};

package/dist/components/ParameterPath/ParameterPathRow.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import { range } from "../../utils/range.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { rowVariants } from "./classes.js";
+import { MEASURE, ROW } from "./constants.js";
+import { ParameterPathEllipsis } from "./ParameterPathEllipsis.js";
+import { ParameterPathEncoding } from "./ParameterPathEncoding.js";
+import { ParameterPathJoint } from "./ParameterPathJoint.js";
+import { ParameterPathMethod } from "./ParameterPathMethod.js";
+import { ParameterPathSegment } from "./ParameterPathSegment.js";
+const ParameterPathRow = ({ ref, method, segments, encoding, attack, forMeasurement, indices, isExpanded = false })=>{
+    const lastIndex = segments.length - 1;
+    const visibleIdx = forMeasurement || null === indices ? range(segments.length) : indices;
+    const measure = (slot)=>forMeasurement ? slot : void 0;
+    const items = [];
+    if (method) items.push(/*#__PURE__*/ jsx(ParameterPathMethod, {
+        method: method,
+        "data-measure": measure(MEASURE.method)
+    }, "method"));
+    visibleIdx.forEach((segIndex, position)=>{
+        const value = segments[segIndex];
+        if (void 0 === value) return;
+        const isLast = segIndex === lastIndex;
+        const isFirstShown = 0 === position;
+        const showJointBefore = !(isFirstShown && !method);
+        if (showJointBefore) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {
+            "data-measure": measure(MEASURE.joint)
+        }, `j-${segIndex}-pre`));
+        const isCollapsedBoundary = !forMeasurement && null !== indices && 0 === position && 2 === visibleIdx.length;
+        items.push(/*#__PURE__*/ jsx(ParameterPathSegment, {
+            index: segIndex,
+            variant: isLast ? 'highlighted' : 'default',
+            withZap: isLast && attack,
+            "data-measure": measure(MEASURE.segment),
+            children: value
+        }, `s-${segIndex}`));
+        if (isCollapsedBoundary) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {}, "ellipsis-joint-pre"), /*#__PURE__*/ jsx(ParameterPathEllipsis, {}, "ellipsis"));
+    });
+    if (encoding) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {
+        "data-measure": measure(MEASURE.joint)
+    }, "enc-joint"), /*#__PURE__*/ jsx(ParameterPathEncoding, {
+        "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
+        })
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "parameter-path-row",
+        "data-row": ROW.visible,
+        className: rowVariants({
+            expanded: isExpanded
+        }),
+        children: items
+    });
+};
+ParameterPathRow.displayName = 'ParameterPathRow';
+export { ParameterPathRow };

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

@@ -1,3 +1,6 @@
+export declare const rowVariants: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const segmentVariants: (props?: ({
     variant?: "default" | "highlighted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/ParameterPath/classes.js

@@ -1,4 +1,15 @@
 import { cva } from "class-variance-authority";
+const rowVariants = cva('flex items-center gap-0 min-w-0', {
+    variants: {
+        expanded: {
+            true: 'flex-wrap',
+            false: 'overflow-hidden'
+        }
+    },
+    defaultVariants: {
+        expanded: false
+    }
+});
 const segmentVariants = cva('flex items-center justify-center gap-2 shrink-0 text-sm leading-5 whitespace-nowrap font-sans', {
     variants: {
         variant: {
@@ -22,4 +33,4 @@ const ellipsisVariants = cva([
     'h-20 px-2 gap-2',
     'text-text-secondary'
 ]);
-export { ellipsisVariants, encodingVariants, jointVariants, segmentVariants };
+export { ellipsisVariants, encodingVariants, jointVariants, rowVariants, segmentVariants };

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

@@ -0,0 +1,11 @@
+export declare const MEASURE: {
+    readonly method: "method";
+    readonly joint: "joint";
+    readonly segment: "segment";
+    readonly encoding: "encoding";
+};
+export declare const ROW: {
+    readonly visible: "visible";
+    readonly measure: "measure";
+};
+export declare const EXPAND_KEYS: readonly string[];

package/dist/components/ParameterPath/constants.js

@@ -0,0 +1,15 @@
+const MEASURE = {
+    method: 'method',
+    joint: 'joint',
+    segment: 'segment',
+    encoding: 'encoding'
+};
+const ROW = {
+    visible: 'visible',
+    measure: 'measure'
+};
+const EXPAND_KEYS = [
+    'Enter',
+    ' '
+];
+export { EXPAND_KEYS, MEASURE, ROW };

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

@@ -12,5 +12,31 @@ export interface ParameterPathProps extends Omit<HTMLAttributes<HTMLDivElement>,
     segments: string[];
     encoding?: string;
     attack?: boolean;
+    /**
+     * Opt in to click-to-expand. When `true`, a *truncated* path becomes
+     * interactive: clicking the `…` collapse indicator (or the path) expands it
+     * inline to show every segment, and clicking again collapses it back to
+     * `first … last`. No effect when the path already fits without truncation.
+     *
+     * `expandable` only controls the affordance (whether the user can toggle);
+     * the open/closed state is owned by `expanded` / `defaultExpanded`.
+     */
+    expandable?: boolean;
+    /**
+     * Controlled expanded state. When provided, the component does not manage its
+     * own state — pair it with {@link onExpandedChange}.
+     */
+    expanded?: boolean;
+    /**
+     * Initial expanded state for the uncontrolled case. Ignored when `expanded`
+     * is provided. Defaults to `false`.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Called with the next expanded state whenever the user toggles the path.
+     * Required for controlled usage; also useful for analytics in the
+     * uncontrolled case.
+     */
+    onExpandedChange?: (expanded: boolean) => void;
     copyFormat?: (data: CopyFormatData) => string;
 }

package/dist/components/ParameterPath/useParameterPathTruncation.js

@@ -1,10 +1,10 @@
 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 segCount = segmentWidths.length;
-    const allIndices = Array.from({
-        length: segCount
-    }, (_, i)=>i);
+    const allIndices = range(segCount);
     if (segCount <= 2 || containerWidth <= 0) return {
         isTruncated: false,
         visibleSegmentIndices: allIndices
@@ -27,17 +27,15 @@ const useParameterPathTruncation = ({ containerRef, measurementRef, segmentCount
     const containerWidth = useContainerWidth(containerRef);
     const [result, setResult] = useState({
         isTruncated: false,
-        visibleSegmentIndices: Array.from({
-            length: segmentCount
-        }, (_, i)=>i)
+        visibleSegmentIndices: range(segmentCount)
     });
     useLayoutEffect(()=>{
         const root = measurementRef.current;
         if (!root) return;
-        const methodEl = root.querySelector('[data-measure="method"]');
-        const encodingEl = root.querySelector('[data-measure="encoding"]');
-        const jointEls = Array.from(root.querySelectorAll('[data-measure="joint"]'));
-        const segmentEls = Array.from(root.querySelectorAll('[data-measure="segment"]'));
+        const methodEl = root.querySelector(`[data-measure="${MEASURE.method}"]`);
+        const encodingEl = root.querySelector(`[data-measure="${MEASURE.encoding}"]`);
+        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;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.50.1",
-  "generatedAt": "2026-06-01T09:06:56.612Z",
+  "version": "0.50.2",
+  "generatedAt": "2026-06-01T16:00:25.004Z",
   "components": [
     {
       "name": "Accordion",
@@ -32167,6 +32167,26 @@
           "required": false,
           "defaultValue": "false"
         },
+        {
+          "name": "expandable",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Opt in to click-to-expand. When `true`, a *truncated* path becomes\ninteractive: clicking the `…` collapse indicator (or the path) expands it\ninline to show every segment, and clicking again collapses it back to\n`first … last`. No effect when the path already fits without truncation.\n\n`expandable` only controls the affordance (whether the user can toggle);\nthe open/closed state is owned by `expanded` / `defaultExpanded`.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "expanded",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Controlled expanded state. When provided, the component does not manage its\nown state — pair it with {@link onExpandedChange}."
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Initial expanded state for the uncontrolled case. Ignored when `expanded`\nis provided. Defaults to `false`.",
+          "defaultValue": "false"
+        },
         {
           "name": "copyFormat",
           "type": "((data: CopyFormatData) => string) | undefined",
@@ -32445,6 +32465,14 @@
         }
       ],
       "variants": [
+        {
+          "name": "expanded",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        },
         {
           "name": "variant",
           "options": [
@@ -32484,6 +32512,10 @@
           "name": "NoMethod",
           "code": "() => (\n  <ParameterPath segments={['cookie', 'session_id']} attack />\n)"
         },
+        {
+          "name": "ExpandableTruncated",
+          "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)"
+        },
         {
           "name": "Playground",
           "code": "args => <ParameterPath {...args} />"

package/dist/utils/hasTextSelection.d.ts

@@ -0,0 +1 @@
+export declare const hasTextSelection: () => boolean;

package/dist/utils/hasTextSelection.js

@@ -0,0 +1,2 @@
+const hasTextSelection = ()=>(window.getSelection()?.toString().length ?? 0) > 0;
+export { hasTextSelection };

package/dist/utils/range.d.ts

@@ -0,0 +1 @@
+export declare const range: (length: number) => number[];

package/dist/utils/range.js

@@ -0,0 +1,4 @@
+const range = (length)=>Array.from({
+        length: Math.max(0, length)
+    }, (_, i)=>i);
+export { range };

package/package.json

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