@wallarm-org/design-system 0.32.1 → 0.33.0-rc-feature-WDS-107-parametr-path.2

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { ParameterPathProps } from './types';
+export declare const ParameterPath: FC<ParameterPathProps>;

package/dist/components/ParameterPath/ParameterPath.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { buildFullPathLabel } from "./buildFullPathLabel.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 { useParameterPathTruncation } from "./useParameterPathTruncation.js";
+const ParameterPath = ({ ref, method, segments, encoding, attack = false, copyFormat = formatAsFilter, className, 'data-testid': testId, ...rest })=>{
+    const handleCopy = useCallback((event)=>{
+        const text = copyFormat({
+            method,
+            segments,
+            encoding
+        });
+        if (!text) return;
+        event.preventDefault();
+        event.clipboardData.setData('text/plain', text);
+    }, [
+        copyFormat,
+        method,
+        segments,
+        encoding
+    ]);
+    const containerRef = useRef(null);
+    const measurementRef = useRef(null);
+    const { isTruncated, visibleSegmentIndices } = useParameterPathTruncation({
+        containerRef,
+        measurementRef,
+        segmentCount: segments.length,
+        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)
+        })
+    });
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        disabled: !isTruncated,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("div", {
+                    ...rest,
+                    "data-testid": testId,
+                    "data-slot": "parameter-path",
+                    "data-truncated": isTruncated || void 0,
+                    ref: ref,
+                    onCopy: handleCopy,
+                    className: cn('relative flex items-center min-w-0', className),
+                    children: /*#__PURE__*/ jsxs(TestIdProvider, {
+                        value: testId,
+                        children: [
+                            visibleRow,
+                            measurementRow
+                        ]
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: buildFullPathLabel(method, segments, encoding)
+            })
+        ]
+    });
+};
+ParameterPath.displayName = 'ParameterPath';
+export { ParameterPath };

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

@@ -0,0 +1,4 @@
+import type { FC, HTMLAttributes } from 'react';
+type ParameterPathEllipsisProps = HTMLAttributes<HTMLSpanElement>;
+export declare const ParameterPathEllipsis: FC<ParameterPathEllipsisProps>;
+export {};

package/dist/components/ParameterPath/ParameterPathEllipsis.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Ellipsis } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { ellipsisVariants } from "./classes.js";
+const ParameterPathEllipsis = ({ className, ...rest })=>{
+    const testId = useTestId('ellipsis');
+    return /*#__PURE__*/ jsx("span", {
+        ...rest,
+        "data-slot": "parameter-path-ellipsis",
+        "data-testid": testId,
+        "aria-label": "Collapsed segments",
+        className: cn(ellipsisVariants(), className),
+        children: /*#__PURE__*/ jsx(Ellipsis, {
+            size: "sm"
+        })
+    });
+};
+ParameterPathEllipsis.displayName = 'ParameterPathEllipsis';
+export { ParameterPathEllipsis };

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

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes } from 'react';
+interface ParameterPathEncodingProps extends HTMLAttributes<HTMLSpanElement> {
+    children: string;
+}
+export declare const ParameterPathEncoding: FC<ParameterPathEncodingProps>;
+export {};

package/dist/components/ParameterPath/ParameterPathEncoding.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { encodingVariants } from "./classes.js";
+const ParameterPathEncoding = ({ children, className, ...rest })=>{
+    const testId = useTestId('encoding');
+    return /*#__PURE__*/ jsx("span", {
+        ...rest,
+        "data-slot": "parameter-path-encoding",
+        "data-testid": testId,
+        className: cn(encodingVariants(), className),
+        children: children
+    });
+};
+ParameterPathEncoding.displayName = 'ParameterPathEncoding';
+export { ParameterPathEncoding };

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

@@ -0,0 +1,4 @@
+import type { FC, HTMLAttributes } from 'react';
+type ParameterPathJointProps = HTMLAttributes<HTMLSpanElement>;
+export declare const ParameterPathJoint: FC<ParameterPathJointProps>;
+export {};

package/dist/components/ParameterPath/ParameterPathJoint.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { ChevronRight } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { jointVariants } from "./classes.js";
+const ParameterPathJoint = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        ...rest,
+        "aria-hidden": "true",
+        "data-slot": "parameter-path-joint",
+        className: cn(jointVariants(), className),
+        children: /*#__PURE__*/ jsx(ChevronRight, {
+            size: "sm"
+        })
+    });
+ParameterPathJoint.displayName = 'ParameterPathJoint';
+export { ParameterPathJoint };

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

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes } from 'react';
+import type { HttpMethod } from './types';
+interface ParameterPathMethodProps extends HTMLAttributes<HTMLSpanElement> {
+    method: HttpMethod;
+}
+export declare const ParameterPathMethod: FC<ParameterPathMethodProps>;
+export {};

package/dist/components/ParameterPath/ParameterPathMethod.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Badge } from "../Badge/index.js";
+import { HTTP_METHOD_COLOR } from "./constants.js";
+const ParameterPathMethod = ({ method, className, ...rest })=>{
+    const testId = useTestId('method');
+    return /*#__PURE__*/ jsx("span", {
+        ...rest,
+        "data-slot": "parameter-path-method",
+        "data-testid": testId,
+        className: cn('flex items-center', className),
+        children: /*#__PURE__*/ jsx(Badge, {
+            type: "secondary",
+            color: HTTP_METHOD_COLOR[method],
+            size: "medium",
+            textVariant: "code",
+            children: method
+        })
+    });
+};
+ParameterPathMethod.displayName = 'ParameterPathMethod';
+export { ParameterPathMethod };

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

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes } from 'react';
+interface ParameterPathSegmentProps extends HTMLAttributes<HTMLSpanElement> {
+    children: string;
+    variant?: 'default' | 'highlighted';
+    /** Show the Zap icon — only honored when `variant='highlighted'`. */
+    withZap?: boolean;
+    /** Segment index in the path; used to derive a `segment-N` test id. */
+    index?: number;
+}
+export declare const ParameterPathSegment: FC<ParameterPathSegmentProps>;
+export {};

package/dist/components/ParameterPath/ParameterPathSegment.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Zap } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { segmentVariants } from "./classes.js";
+const ParameterPathSegment = ({ children, variant = 'default', withZap = false, index, className, ...rest })=>{
+    const testId = useTestId(void 0 !== index ? `segment-${index}` : 'segment');
+    return /*#__PURE__*/ jsxs("span", {
+        ...rest,
+        "data-slot": "parameter-path-segment",
+        "data-variant": variant,
+        "data-testid": testId,
+        className: cn(segmentVariants({
+            variant
+        }), className),
+        children: [
+            children,
+            withZap && 'highlighted' === variant ? /*#__PURE__*/ jsx(Zap, {
+                size: "sm",
+                className: "text-icon-danger",
+                "aria-hidden": "true"
+            }) : null
+        ]
+    });
+};
+ParameterPathSegment.displayName = 'ParameterPathSegment';
+export { ParameterPathSegment };

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

@@ -0,0 +1,2 @@
+import type { HttpMethod } from './types';
+export declare const buildFullPathLabel: (method: HttpMethod | undefined, segments: string[], encoding?: string) => string;

package/dist/components/ParameterPath/buildFullPathLabel.js

@@ -0,0 +1,8 @@
+const buildFullPathLabel = (method, segments, encoding)=>{
+    const parts = [];
+    if (method) parts.push(method);
+    parts.push(...segments);
+    if (encoding) parts.push(encoding);
+    return parts.join(' › ');
+};
+export { buildFullPathLabel };

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

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

package/dist/components/ParameterPath/classes.js

@@ -0,0 +1,25 @@
+import { cva } from "class-variance-authority";
+const segmentVariants = cva('flex items-center justify-center gap-2 shrink-0 text-sm leading-5 whitespace-nowrap font-sans', {
+    variants: {
+        variant: {
+            default: 'text-text-secondary font-normal',
+            highlighted: 'text-text-primary font-medium'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+const encodingVariants = cva([
+    'flex items-center justify-center shrink-0 gap-2',
+    'h-20 rounded-8 border-1 border-dashed border-border-primary',
+    'px-4',
+    'font-mono text-xs leading-4 text-text-secondary'
+]);
+const jointVariants = cva('flex items-center shrink-0 p-2 text-icon-secondary');
+const ellipsisVariants = cva([
+    'flex items-center justify-center shrink-0',
+    'h-20 px-2 gap-2',
+    'text-text-secondary'
+]);
+export { ellipsisVariants, encodingVariants, jointVariants, segmentVariants };

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

@@ -0,0 +1,3 @@
+import type { BadgeColor } from '../Badge';
+import type { HttpMethod } from './types';
+export declare const HTTP_METHOD_COLOR: Record<HttpMethod, BadgeColor>;

package/dist/components/ParameterPath/constants.js

@@ -0,0 +1,10 @@
+const HTTP_METHOD_COLOR = {
+    GET: 'green',
+    POST: 'yellow',
+    PUT: 'blue',
+    PATCH: 'cyan',
+    DELETE: 'red',
+    HEAD: 'slate',
+    OPTIONS: 'violet'
+};
+export { HTTP_METHOD_COLOR };

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

@@ -0,0 +1,2 @@
+import type { CopyFormatData } from './types';
+export declare const formatAsFilter: ({ method, segments, encoding }: CopyFormatData) => string;

package/dist/components/ParameterPath/formatAsFilter.js

@@ -0,0 +1,13 @@
+const quoteValue = (raw)=>{
+    if (!raw.includes('"')) return `"${raw}"`;
+    if (!raw.includes("'")) return `'${raw}'`;
+    return `"${raw.replace(/"/g, '')}"`;
+};
+const formatAsFilter = ({ method, segments, encoding })=>{
+    const parts = [];
+    if (method) parts.push(`method = ${quoteValue(method)}`);
+    if (segments.length > 0) parts.push(`parameter = ${quoteValue(segments.join('.'))}`);
+    if (encoding) parts.push(`encoding = ${quoteValue(encoding)}`);
+    return parts.join(' AND ');
+};
+export { formatAsFilter };

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

@@ -0,0 +1,3 @@
+export { formatAsFilter } from './formatAsFilter';
+export { ParameterPath } from './ParameterPath';
+export type { CopyFormatData, HttpMethod, ParameterPathProps } from './types';

package/dist/components/ParameterPath/index.js

@@ -0,0 +1,3 @@
+import { formatAsFilter } from "./formatAsFilter.js";
+import { ParameterPath } from "./ParameterPath.js";
+export { ParameterPath, formatAsFilter };

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId';
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
+export interface CopyFormatData {
+    method?: HttpMethod;
+    segments: string[];
+    encoding?: string;
+}
+export interface ParameterPathProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCopy'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    method?: HttpMethod;
+    segments: string[];
+    encoding?: string;
+    attack?: boolean;
+    copyFormat?: (data: CopyFormatData) => string;
+}

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

@@ -0,0 +1,22 @@
+import { type RefObject } from 'react';
+interface ComputeArgs {
+    containerWidth: number;
+    methodWidth: number;
+    encodingWidth: number;
+    segmentWidths: number[];
+    jointsWidth: number;
+}
+interface TruncationResult {
+    isTruncated: boolean;
+    visibleSegmentIndices: number[];
+}
+export declare const computeTruncation: ({ containerWidth, methodWidth, encodingWidth, segmentWidths, jointsWidth, }: ComputeArgs) => TruncationResult;
+interface UseTruncationArgs {
+    containerRef: RefObject<HTMLElement | null>;
+    measurementRef: RefObject<HTMLElement | null>;
+    segmentCount: number;
+    hasMethod: boolean;
+    hasEncoding: boolean;
+}
+export declare const useParameterPathTruncation: ({ containerRef, measurementRef, segmentCount, hasMethod, hasEncoding, }: UseTruncationArgs) => TruncationResult;
+export {};

package/dist/components/ParameterPath/useParameterPathTruncation.js

@@ -0,0 +1,62 @@
+import { useLayoutEffect, useState } from "react";
+import { useContainerWidth } from "../Table/lib/useContainerWidth.js";
+const computeTruncation = ({ containerWidth, methodWidth, encodingWidth, segmentWidths, jointsWidth })=>{
+    const segCount = segmentWidths.length;
+    const allIndices = Array.from({
+        length: segCount
+    }, (_, i)=>i);
+    if (segCount <= 2 || containerWidth <= 0) return {
+        isTruncated: false,
+        visibleSegmentIndices: allIndices
+    };
+    const totalWidth = methodWidth + encodingWidth + segmentWidths.reduce((acc, w)=>acc + w, 0) + jointsWidth;
+    if (totalWidth <= containerWidth) return {
+        isTruncated: false,
+        visibleSegmentIndices: allIndices
+    };
+    return {
+        isTruncated: true,
+        visibleSegmentIndices: [
+            0,
+            segCount - 1
+        ]
+    };
+};
+const indicesEqual = (a, b)=>a.length === b.length && a.every((v, i)=>v === b[i]);
+const useParameterPathTruncation = ({ containerRef, measurementRef, segmentCount, hasMethod, hasEncoding })=>{
+    const containerWidth = useContainerWidth(containerRef);
+    const [result, setResult] = useState({
+        isTruncated: false,
+        visibleSegmentIndices: Array.from({
+            length: segmentCount
+        }, (_, i)=>i)
+    });
+    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 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 next = computeTruncation({
+            containerWidth,
+            methodWidth,
+            encodingWidth,
+            segmentWidths,
+            jointsWidth
+        });
+        setResult((prev)=>prev.isTruncated === next.isTruncated && indicesEqual(prev.visibleSegmentIndices, next.visibleSegmentIndices) ? prev : next);
+    }, [
+        containerWidth,
+        segmentCount,
+        hasMethod,
+        hasEncoding,
+        measurementRef
+    ]);
+    return result;
+};
+export { computeTruncation, useParameterPathTruncation };

package/dist/components/Select/SelectInput/SelectInput.js

@@ -67,7 +67,9 @@ const SelectInput = ({ placeholder = 'Choose...' })=>{
                     multiple && !isEmpty ? /*#__PURE__*/ jsx(OverflowList, {
                         className: "flex items-center gap-4 flex-1 h-full pl-6 overflow-hidden",
                         items: selectedItems,
-                        itemRenderer: SelectInputItemRenderer,
+                        itemRenderer: (item)=>/*#__PURE__*/ jsx(SelectInputItemRenderer, {
+                                item: item
+                            }, item.value),
                         overflowRenderer: SelectInputOverflowRenderer
                     }) : /*#__PURE__*/ jsx(SelectValueText, {
                         placeholder: placeholder

package/dist/components/Select/SelectInput/SelectInputItemRenderer.d.ts

@@ -1,2 +1,7 @@
+import type { FC } from 'react';
 import type { SelectDataItem } from '../types';
-export declare const SelectInputItemRenderer: (item: SelectDataItem) => import("react/jsx-runtime").JSX.Element;
+type SelectInputItemRendererProps = {
+    item: SelectDataItem;
+};
+export declare const SelectInputItemRenderer: FC<SelectInputItemRendererProps>;
+export {};

package/dist/components/Select/SelectInput/SelectInputItemRenderer.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelectContext } from "@ark-ui/react/select";
 import { Tag, TagClose } from "../../Tag/index.js";
-const SelectInputItemRenderer = (item)=>{
+const SelectInputItemRenderer = ({ item })=>{
     const { value, setValue } = useSelectContext();
     const handleRemove = ()=>{
         const nextValue = value.filter((v)=>v !== item.value);
@@ -17,6 +17,6 @@ const SelectInputItemRenderer = (item)=>{
                 onClick: handleRemove
             })
         ]
-    }, item.value);
+    });
 };
 export { SelectInputItemRenderer };

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export { Loader, type LoaderProps } from './components/Loader';
 export { NumberInput, type NumberInputProps } from './components/NumberInput';
 export { NumericBadge, type NumericBadgeProps, } from './components/NumericBadge';
 export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentProps, type OverflowTooltipProps, } from './components/OverflowTooltip';
+export { type CopyFormatData, formatAsFilter, type HttpMethod, ParameterPath, type ParameterPathProps, } from './components/ParameterPath';
 export { Popover, PopoverContent, PopoverTrigger } from './components/Popover';
 export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type RadioGroupProps, RadioIndicator, RadioLabel, type RadioLabelProps, type RadioProps, } from './components/Radio';
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';

package/dist/index.js

@@ -27,6 +27,7 @@ import { Loader } from "./components/Loader/index.js";
 import { NumberInput } from "./components/NumberInput/index.js";
 import { NumericBadge } from "./components/NumericBadge/index.js";
 import { OverflowTooltip, OverflowTooltipContent } from "./components/OverflowTooltip/index.js";
+import { ParameterPath, formatAsFilter } from "./components/ParameterPath/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./components/Popover/index.js";
 import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from "./components/Radio/index.js";
 import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
@@ -51,4 +52,4 @@ import { ToggleButton } from "./components/ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, getLocalTimeZone, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, ParameterPath, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, formatAsFilter, getLocalTimeZone, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.32.0",
-  "generatedAt": "2026-05-04T09:33:04.349Z",
+  "version": "0.32.1",
+  "generatedAt": "2026-05-05T07:07:16.597Z",
   "components": [
     {
       "name": "Alert",
@@ -20714,6 +20714,358 @@
         }
       ]
     },
+    {
+      "name": "ParameterPath",
+      "importPath": "@wallarm-org/design-system/ParameterPath",
+      "props": [
+        {
+          "name": "method",
+          "type": "HttpMethod | undefined",
+          "required": false
+        },
+        {
+          "name": "segments",
+          "type": "string[]",
+          "required": true
+        },
+        {
+          "name": "encoding",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "attack",
+          "type": "boolean | undefined",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "copyFormat",
+          "type": "((data: CopyFormatData) => string) | undefined",
+          "required": false,
+          "defaultValue": "formatAsFilter"
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | number | readonly string[] | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressContentEditableWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressHydrationWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "accessKey",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCapitalize",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+          "required": false
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "contentEditable",
+          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+          "required": false
+        },
+        {
+          "name": "contextMenu",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "dir",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "draggable",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "enterKeyHint",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "required": false
+        },
+        {
+          "name": "hidden",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "lang",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "nonce",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "slot",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "tabIndex",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "translate",
+          "type": "\"yes\" | \"no\" | undefined",
+          "required": false
+        },
+        {
+          "name": "radioGroup",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "role",
+          "type": "AriaRole | undefined",
+          "required": false
+        },
+        {
+          "name": "about",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "content",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "datatype",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "inlist",
+          "type": "any",
+          "required": false
+        },
+        {
+          "name": "prefix",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "property",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "rel",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "resource",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "rev",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "typeof",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "vocab",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCorrect",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoSave",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemProp",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemScope",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "itemType",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemID",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemRef",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "results",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "security",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "unselectable",
+          "type": "\"off\" | \"on\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popover",
+          "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popoverTargetAction",
+          "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popoverTarget",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "inert",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"
+        },
+        {
+          "name": "inputMode",
+          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "required": false,
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+        },
+        {
+          "name": "is",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+        },
+        {
+          "name": "exportparts",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+        },
+        {
+          "name": "part",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        }
+      ],
+      "variants": [
+        {
+          "name": "variant",
+          "options": [
+            "default",
+            "highlighted"
+          ],
+          "defaultValue": "default"
+        }
+      ],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "FullPath",
+          "code": "() => (\n  <ParameterPath method='POST' segments={['JSON', 'nginx_config']} encoding='BASE64' attack />\n)"
+        },
+        {
+          "name": "NoEncoding",
+          "code": "() => (\n  <ParameterPath method='GET' segments={['query', 'filter']} attack />\n)"
+        },
+        {
+          "name": "PathIndexBola",
+          "code": "() => (\n  <ParameterPath method='GET' segments={['path', '2']} attack />\n)"
+        },
+        {
+          "name": "Header",
+          "code": "() => (\n  <ParameterPath method='GET' segments={['header', 'X-Forwarded-For']} attack />\n)"
+        },
+        {
+          "name": "Cookie",
+          "code": "() => (\n  <ParameterPath method='POST' segments={['cookie', 'session_id']} attack />\n)"
+        },
+        {
+          "name": "DeepNestedTruncated",
+          "code": "() => (\n  <div style={{ width: 280 }}>\n    <ParameterPath\n      method='POST'\n      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}\n      attack\n    />\n  </div>\n)"
+        },
+        {
+          "name": "NoMethod",
+          "code": "() => (\n  <ParameterPath segments={['cookie', 'session_id']} attack />\n)"
+        },
+        {
+          "name": "Playground",
+          "code": "args => <ParameterPath {...args} />"
+        },
+        {
+          "name": "Gallery",
+          "code": "() => (\n  <VStack gap={16}>\n    <ParameterPath method='POST' segments={['JSON', 'nginx_config']} encoding='BASE64' attack />\n    <ParameterPath method='GET' segments={['query', 'filter']} attack />\n    <ParameterPath method='GET' segments={['path', '2']} attack />\n    <ParameterPath method='GET' segments={['header', 'X-Forwarded-For']} attack />\n    <ParameterPath method='POST' segments={['cookie', 'session_id']} attack />\n    <div style={{ width: 280 }}>\n      <ParameterPath method='POST' segments={['multipart', 'a', 'b', 'c', 'd', 'get']} attack />\n    </div>\n  </VStack>\n)"
+        }
+      ]
+    },
     {
       "name": "Polymorphic",
       "importPath": "@wallarm-org/design-system/Polymorphic",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.32.1",
+  "version": "0.33.0-rc-feature-WDS-107-parametr-path.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",