@wallarm-org/design-system 0.88.0 → 0.88.1-rc-fix-status-code-zero-value.2

package/dist/components/FilterInput/lib/statusCode/createStatusCodeNormalizer.d.ts

@@ -4,6 +4,7 @@
  *   - "2"  → "2XX"
  *   - "22" → "22X"
  *   - "2x" → "2XX"
+ *   - "0"  → "0XX"  (Wallarm's "no response" class)
  *   - "222", "4XX", "40X" → unchanged (already 3 chars)
  * Leaves anything unrecognised alone so `validate` can still flag it.
  */

package/dist/components/FilterInput/lib/statusCode/createStatusCodeSerializer.d.ts

@@ -8,6 +8,7 @@
  *   "222" → "222"
  *   "4XX" → "4"
  *   "40X" → "40"
+ *   "0XX" → "0"   (Wallarm's "no response" class)
  *
  * Anything that isn't a status-code-shaped string (e.g. a number, boolean,
  * or freeform text) is returned unchanged so invalid committed values still

package/dist/components/FilterInput/lib/statusCode/createStatusCodeSuggestions.d.ts

@@ -2,15 +2,15 @@ import type { FieldValueOption } from '../../types';
 /**
  * Build the `getSuggestions` callback for an HTTP status code field. The
  * returned function:
- *   - on empty input, offers every HTTP class mask (`1XX..5XX`)
+ *   - on empty input, offers every class mask (`0XX..5XX`)
  *   - on partial input (`"3"`, `"3X"`, `"30"`, …), expands it via
  *     `canonicalizeStatusCodeInput` and offers the single matching mask
  *   - merges any `context.selectedValues` (values already committed to the
  *     chip) in front of the input-driven output so they always appear with
  *     their canonical badge styling
  *
- * No backend config is required — the status-code class range is fixed to
- * `[1..5]` per the HTTP spec.
+ * No backend config is required — the class range is fixed to `[0..5]`
+ * (HTTP `1`–`5` plus Wallarm's `0` "no response" class).
  */
 export declare const createStatusCodeSuggestions: () => ((inputText: string, context?: {
     selectedValues?: Array<string | number | boolean>;

package/dist/components/FilterInput/lib/statusCode/createStatusCodeValidator.d.ts

@@ -1,7 +1,8 @@
 /**
  * Build a validator for the HTTP status code field. Accepts only 3-character
- * values whose leading digit is a valid HTTP class (`[1..5]`) and whose
- * remaining two characters form one of:
+ * values whose leading digit is a valid class root (`[0..5]` — `1`–`5` are the
+ * HTTP classes, `0` is Wallarm's "no response" class) and whose remaining two
+ * characters form one of:
  *   - `XX` (mask like `4XX`)
  *   - `dX` (narrowed mask like `40X`)
  *   - `dd` (concrete code like `401`)

package/dist/components/FilterInput/lib/statusCode/utils/canonicalize.d.ts

@@ -5,6 +5,7 @@
  *
  * Accepted inputs:
  *   "3"   → "3XX"    (single digit pads to full class mask)
+ *   "0"   → "0XX"    (Wallarm's "no response" class)
  *   "3X"  → "3XX"    (partial mask)
  *   "3XX" → "3XX"    (full mask)
  *   "30"  → "30X"    (two digits pad to narrowed mask)
@@ -14,7 +15,7 @@
  * Rejected:
  *   "3X0"            (digit after placeholder)
  *   "X30"            (starts with placeholder)
- *   "6..."           (leading digit outside the `[1..5]` HTTP class range)
+ *   "6..."           (leading digit outside the `[0..5]` class range)
  *   "ab..."          (non-digit, non-X)
  */
 export declare const canonicalizeStatusCodeInput: (input: string) => string | null;

package/dist/components/FilterInput/lib/statusCode/utils/constants.d.ts

@@ -1,6 +1,8 @@
-/** The five valid HTTP status-code classes, used both for suggestion-building
- *  and validation. Backed by the standard HTTP spec — entirely frontend-driven,
- *  independent of what the backend config carries.
+/** The valid status-code class roots, used both for suggestion-building and
+ *  validation. `1`–`5` are the standard HTTP classes; `0` is Wallarm's
+ *  "no HTTP response captured" class (the backend publishes `status_code=0`,
+ *  shown as the `0XX` mask). Entirely frontend-driven, independent of what the
+ *  backend config carries.
  *
  *  Typed as `readonly string[]` (not `as const`) so `.includes(someString)`
  *  stays callable without casting; declaration-file generation rejects the

package/dist/components/FilterInput/lib/statusCode/utils/constants.js

@@ -1,4 +1,5 @@
 const MASK_ROOTS = [
+    '0',
     '1',
     '2',
     '3',

package/dist/components/FilterInput/lib/statusCode/utils/makeMask.d.ts

@@ -1,8 +1,12 @@
 import type { FieldValueOption } from '../../../types';
 /** Build a `FieldValueOption` for a status-code mask or concrete code. Badge
  *  color is derived via the shared `ResponseCode` primitive so the two stay
- *  in sync. Throws if the input falls outside the 1XX–5XX classes — this is
- *  unreachable in practice because callers gate on `maskRoots`, but the check
+ *  in sync.
+ *
+ *  The `0XX` class (Wallarm's "no HTTP response captured", backend
+ *  `status_code=0`) has no standard HTTP category, so it renders as a neutral
+ *  slate pill. Any other value outside the `1XX–5XX` classes throws — this is
+ *  unreachable in practice because callers gate on `MASK_ROOTS`, but the check
  *  is kept as a safety net so a future refactor can't silently emit a
  *  colorless pill. */
 export declare const makeMask: (label: string) => FieldValueOption;

package/dist/components/FilterInput/lib/statusCode/utils/makeMask.js

@@ -1,7 +1,17 @@
 import { RESPONSE_CODE_COLOR, getResponseCodeCategory } from "../../../../ResponseCode/index.js";
 const makeMask = (label)=>{
     const category = getResponseCodeCategory(label);
-    if ('unknown' === category) throw new Error(`statusCode: no badge color for mask "${label}"`);
+    if ('unknown' === category) {
+        if (label.startsWith('0')) return {
+            value: label,
+            label,
+            badge: {
+                color: RESPONSE_CODE_COLOR.unknown,
+                text: label
+            }
+        };
+        throw new Error(`statusCode: no badge color for mask "${label}"`);
+    }
     return {
         value: label,
         label,

package/dist/components/Table/EditableCell/EditableSelectCell.d.ts

@@ -0,0 +1,28 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+import { type SelectDataItem } from '../../Select';
+type NativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'>;
+export interface EditableSelectCellProps extends NativeProps, TestableProps {
+    /** Current committed value; `null` / `''` renders the placeholder. */
+    value: string | null;
+    /** Called with the picked value when the selection changes. */
+    onCommit: (value: string) => void;
+    /** Options for the dropdown. */
+    items: SelectDataItem[];
+    /** Read-mode rendering of the selected value (e.g. a `Badge`). */
+    children?: ReactNode;
+    /** Shown when nothing is selected. Defaults to `'Select…'`. */
+    placeholder?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Inline-editable, fixed-option cell for the DataTable. The cell IS the select
+ * trigger, so the read view is never swapped out — opening the menu only paints
+ * the brand-orange border and drops the dropdown below (zero layout shift).
+ * When nothing is selected it renders `placeholder`.
+ *
+ * Analytics-ready: arbitrary `data-*` / `aria-*` / `id` / event props land on
+ * the trigger element, which is the real interactive node.
+ */
+export declare const EditableSelectCell: FC<EditableSelectCellProps>;
+export {};

package/dist/components/Table/EditableCell/EditableSelectCell.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Select } from "@ark-ui/react/select";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { Select as index_js_Select, SelectContent, SelectOption, SelectOptionIndicator, SelectOptionText, SelectPositioner, createListCollection } from "../../Select/index.js";
+import { editableCellPlaceholder, editableCellValue, editableCellVariants } from "./classes.js";
+const EditableSelectCell = ({ value, onCommit, items, children, placeholder = 'Select…', className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId(void 0, testIdProp);
+    const collection = useMemo(()=>createListCollection({
+            items
+        }), [
+        items
+    ]);
+    const hasValue = null != value && '' !== value;
+    return /*#__PURE__*/ jsxs(index_js_Select, {
+        className: "h-full",
+        collection: collection,
+        value: hasValue ? [
+            value
+        ] : [],
+        "data-testid": testId,
+        onValueChange: (details)=>{
+            const next = details.value[0];
+            if (next && next !== value) onCommit(next);
+        },
+        children: [
+            /*#__PURE__*/ jsx(Select.Control, {
+                className: "h-full",
+                children: /*#__PURE__*/ jsx(Select.Trigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsx("div", {
+                        ...rest,
+                        ref: ref,
+                        "data-slot": "editable-select-cell",
+                        className: cn(editableCellVariants({
+                            state: 'idle'
+                        }), 'data-[state=open]:border-border-strong-brand data-[state=open]:bg-bg-surface-1 data-[state=open]:hover:bg-bg-surface-1', className),
+                        children: hasValue ? /*#__PURE__*/ jsx("span", {
+                            className: editableCellValue,
+                            children: children
+                        }) : /*#__PURE__*/ jsx("span", {
+                            className: editableCellPlaceholder,
+                            children: placeholder
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(SelectPositioner, {
+                children: /*#__PURE__*/ jsx(SelectContent, {
+                    children: items.map((item)=>/*#__PURE__*/ jsxs(SelectOption, {
+                            item: item,
+                            children: [
+                                /*#__PURE__*/ jsx(SelectOptionText, {
+                                    children: item.label
+                                }),
+                                /*#__PURE__*/ jsx(SelectOptionIndicator, {})
+                            ]
+                        }, item.value))
+                })
+            })
+        ]
+    });
+};
+EditableSelectCell.displayName = 'EditableSelectCell';
+export { EditableSelectCell };

package/dist/components/Table/EditableCell/EditableTextCell.d.ts

@@ -0,0 +1,22 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+type NativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export interface EditableTextCellProps extends NativeProps, TestableProps {
+    /** Current committed value. */
+    value: string;
+    /** Called with the new value on Enter / blur (only when it actually changed). */
+    onCommit: (value: string) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Inline-editable text cell for the DataTable. Idle it reads as text (the whole
+ * cell highlights on hover); click / Enter / Space swaps in a borderless input
+ * in the exact same position (brand-orange border, no layout shift). Enter or
+ * blur commits, Escape reverts.
+ *
+ * Analytics-ready: arbitrary `data-*` / `aria-*` / `id` / event props (e.g.
+ * `data-analytics-id`) land on the persistent cell element, so they resolve via
+ * `closest()` whether the read view or the input is the active target.
+ */
+export declare const EditableTextCell: FC<EditableTextCellProps>;
+export {};

package/dist/components/Table/EditableCell/EditableTextCell.js

@@ -0,0 +1,78 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pencil } from "../../../icons/index.js";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { editableCellIcon, editableCellInput, editableCellValue, editableCellVariants } from "./classes.js";
+const EditableTextCell = ({ value, onCommit, className, ref, 'data-testid': testIdProp, 'aria-label': ariaLabel, onClick, onKeyDown, ...rest })=>{
+    const testId = useTestId(void 0, testIdProp);
+    const [isEditing, setIsEditing] = useState(false);
+    const [draft, setDraft] = useState(value);
+    const start = ()=>{
+        setDraft(value);
+        setIsEditing(true);
+    };
+    const commit = ()=>{
+        setIsEditing(false);
+        if (draft !== value) onCommit(draft);
+    };
+    const cancel = ()=>{
+        setIsEditing(false);
+        setDraft(value);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...rest,
+        ref: ref,
+        "data-slot": "editable-text-cell",
+        "data-testid": testId,
+        "data-editing": isEditing || void 0,
+        className: cn(editableCellVariants({
+            state: isEditing ? 'active' : 'idle'
+        }), className),
+        role: isEditing ? void 0 : 'button',
+        tabIndex: isEditing ? void 0 : 0,
+        "aria-label": isEditing ? void 0 : ariaLabel,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!isEditing) start();
+        },
+        onKeyDown: (event)=>{
+            onKeyDown?.(event);
+            if (!isEditing && ('Enter' === event.key || ' ' === event.key)) {
+                event.preventDefault();
+                start();
+            }
+        },
+        children: isEditing ? /*#__PURE__*/ jsx("input", {
+            autoFocus: true,
+            "aria-label": ariaLabel,
+            value: draft,
+            "data-testid": testId ? `${testId}--input` : void 0,
+            onChange: (event)=>setDraft(event.currentTarget.value),
+            onFocus: (event)=>event.currentTarget.select(),
+            onBlur: commit,
+            onKeyDown: (event)=>{
+                if ('Enter' === event.key) {
+                    event.preventDefault();
+                    commit();
+                } else if ('Escape' === event.key) {
+                    event.preventDefault();
+                    cancel();
+                }
+            },
+            className: editableCellInput
+        }) : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: editableCellValue,
+                    children: value
+                }),
+                /*#__PURE__*/ jsx(Pencil, {
+                    className: cn(editableCellIcon, 'opacity-0 transition-opacity group-hover/cell:opacity-100')
+                })
+            ]
+        })
+    });
+};
+EditableTextCell.displayName = 'EditableTextCell';
+export { EditableTextCell };

package/dist/components/Table/EditableCell/classes.d.ts

@@ -0,0 +1,11 @@
+export declare const editableCellVariants: (props?: ({
+    state?: "active" | "idle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Value slot — truncates, takes the free space, leaves room for the trailing icon. */
+export declare const editableCellValue = "min-w-0 flex-1 truncate";
+/** Same as the value slot but muted, for the empty-state placeholder. */
+export declare const editableCellPlaceholder = "min-w-0 flex-1 truncate text-text-secondary";
+/** Trailing affordance icon (pencil / chevron). */
+export declare const editableCellIcon = "size-16 shrink-0 text-text-secondary";
+/** Borderless in-place text editor — inherits the cell's typography and inset. */
+export declare const editableCellInput = "min-w-0 flex-1 bg-transparent p-0 text-sm text-text-primary outline-none";

package/dist/components/Table/EditableCell/classes.js

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority";
+const editableCellVariants = cva("group/cell flex h-full w-full items-center gap-8 px-16 py-8 border border-transparent text-left text-sm text-text-primary cursor-pointer outline-none transition-colors", {
+    variants: {
+        state: {
+            idle: 'hover:bg-states-primary-hover active:bg-states-primary-pressed',
+            active: 'border-border-strong-brand bg-bg-surface-1'
+        }
+    },
+    defaultVariants: {
+        state: 'idle'
+    }
+});
+const editableCellValue = 'min-w-0 flex-1 truncate';
+const editableCellPlaceholder = 'min-w-0 flex-1 truncate text-text-secondary';
+const editableCellIcon = 'size-16 shrink-0 text-text-secondary';
+const editableCellInput = 'min-w-0 flex-1 bg-transparent p-0 text-sm text-text-primary outline-none';
+export { editableCellIcon, editableCellInput, editableCellPlaceholder, editableCellValue, editableCellVariants };

package/dist/components/Table/EditableCell/constants.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Spread onto an editable column's `meta` so `EditableTextCell` /
+ * `EditableSelectCell` can own the whole body cell:
+ *
+ * - `p-0` removes the body-cell padding (the shell re-applies its own), so the
+ *   hover fill and the editing border reach the cell edges.
+ * - `h-[1px]` gives the cell a definite height. A percentage height (`h-full`
+ *   on the shell) only resolves against a parent with a resolvable height; a
+ *   bare table cell is `height: auto`, so the shell would sit top-aligned and
+ *   leave a gap. The `1px` acts as a minimum the row grows past, and the
+ *   shell's `h-full` then resolves against the real row height (the standard
+ *   "fill a table-cell height" trick).
+ *
+ * Use on a NON-master column — the first/master column is pinned, cut and
+ * truncated by the Table and is not a clean host for a full-bleed editable cell.
+ */
+export declare const EDITABLE_CELL_COLUMN_META: {
+    readonly cellClassName: 'h-[1px] p-0';
+};

package/dist/components/Table/EditableCell/constants.js

@@ -0,0 +1,4 @@
+const EDITABLE_CELL_COLUMN_META = {
+    cellClassName: 'h-[1px] p-0'
+};
+export { EDITABLE_CELL_COLUMN_META };

package/dist/components/Table/EditableCell/index.d.ts

@@ -0,0 +1,4 @@
+export { editableCellVariants } from './classes';
+export { EDITABLE_CELL_COLUMN_META } from './constants';
+export { EditableSelectCell, type EditableSelectCellProps } from './EditableSelectCell';
+export { EditableTextCell, type EditableTextCellProps } from './EditableTextCell';

package/dist/components/Table/EditableCell/index.js

@@ -0,0 +1,4 @@
+export { editableCellVariants } from "./classes.js";
+export { EDITABLE_CELL_COLUMN_META } from "./constants.js";
+export { EditableSelectCell } from "./EditableSelectCell.js";
+export { EditableTextCell } from "./EditableTextCell.js";

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

@@ -1,4 +1,5 @@
 export { BulkBarSummary, BulkBarSummaryClear, type BulkBarSummaryClearProps, BulkBarSummaryCount, type BulkBarSummaryCountProps, type BulkBarSummaryProps, BulkBarSummarySelectAll, type BulkBarSummarySelectAllProps, BulkBarSummarySeparator, } from '../BulkBar';
+export { EDITABLE_CELL_COLUMN_META, EditableSelectCell, type EditableSelectCellProps, EditableTextCell, type EditableTextCellProps, editableCellVariants, } from './EditableCell';
 export { createTableColumnHelper } from './lib';
 export type { TableColumnHelper } from './lib/createTableColumnHelper';
 export { Table } from './Table';

package/dist/components/Table/index.js

@@ -1,4 +1,5 @@
 export { BulkBarSummary, BulkBarSummaryClear, BulkBarSummaryCount, BulkBarSummarySelectAll, BulkBarSummarySeparator } from "../BulkBar/index.js";
+export { EDITABLE_CELL_COLUMN_META, EditableSelectCell, EditableTextCell, editableCellVariants } from "./EditableCell/index.js";
 export { createTableColumnHelper } from "./lib/index.js";
 export { Table } from "./Table.js";
 export { TableActionBar, TableActionBarSelection } from "./TableActionBar/index.js";

package/dist/index.d.ts

@@ -71,7 +71,7 @@ export { SplashScreen, type SplashScreenProps } from './components/SplashScreen'
 export { SplitButton, type SplitButtonProps } from './components/SplitButton';
 export { HStack, type HStackProps, Stack, type StackProps, VStack, type VStackProps, } from './components/Stack';
 export { Switch, SwitchControl, SwitchDescription, type SwitchDescriptionProps, SwitchLabel, type SwitchLabelProps, type SwitchProps, } from './components/Switch';
-export { createTableColumnHelper, Table, type TableAccessorColumnDef, TableActionBar, type TableCellContext, type TableColumnBase, type TableColumnDef, type TableColumnHelper, TableColumnMenu, TableColumnMenuHideItem, type TableColumnMenuHideItemProps, TableColumnMenuMoveLeftItem, type TableColumnMenuMoveLeftItemProps, TableColumnMenuMoveRightItem, type TableColumnMenuMoveRightItemProps, TableColumnMenuPinItem, type TableColumnMenuPinItemProps, type TableColumnMenuProps, TableColumnMenuSortItem, type TableColumnMenuSortItemProps, type TableColumnMeta, type TableColumnPinningState, type TableColumnSizingState, type TableDisplayColumnDef, TableEmptyState, type TableExpandedState, type TableGroupingState, type TableHandle, type TableOnChangeFn, type TableProps, type TableRow, type TableRowSelectionState, type TableScrollToRowOptions, TableSettingsMenu, type TableSortingState, TableSortTrigger, type TableSortTriggerProps, type TableUpdater, type TableVisibilityState, } from './components/Table';
+export { createTableColumnHelper, EDITABLE_CELL_COLUMN_META, EditableSelectCell, type EditableSelectCellProps, EditableTextCell, type EditableTextCellProps, editableCellVariants, Table, type TableAccessorColumnDef, TableActionBar, type TableCellContext, type TableColumnBase, type TableColumnDef, type TableColumnHelper, TableColumnMenu, TableColumnMenuHideItem, type TableColumnMenuHideItemProps, TableColumnMenuMoveLeftItem, type TableColumnMenuMoveLeftItemProps, TableColumnMenuMoveRightItem, type TableColumnMenuMoveRightItemProps, TableColumnMenuPinItem, type TableColumnMenuPinItemProps, type TableColumnMenuProps, TableColumnMenuSortItem, type TableColumnMenuSortItemProps, type TableColumnMeta, type TableColumnPinningState, type TableColumnSizingState, type TableDisplayColumnDef, TableEmptyState, type TableExpandedState, type TableGroupingState, type TableHandle, type TableOnChangeFn, type TableProps, type TableRow, type TableRowSelectionState, type TableScrollToRowOptions, TableSettingsMenu, type TableSortingState, TableSortTrigger, type TableSortTriggerProps, type TableUpdater, type TableVisibilityState, } from './components/Table';
 export { Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, } from './components/Tabs';
 export { Tag, TagClose, type TagProps } from './components/Tag';
 export { Text, type TextProps } from './components/Text';

package/dist/index.js

@@ -60,7 +60,7 @@ export { SplashScreen } from "./components/SplashScreen/index.js";
 export { SplitButton } from "./components/SplitButton/index.js";
 export { HStack, Stack, VStack } from "./components/Stack/index.js";
 export { Switch, SwitchControl, SwitchDescription, SwitchLabel } from "./components/Switch/index.js";
-export { Table, TableActionBar, TableColumnMenu, TableColumnMenuHideItem, TableColumnMenuMoveLeftItem, TableColumnMenuMoveRightItem, TableColumnMenuPinItem, TableColumnMenuSortItem, TableEmptyState, TableSettingsMenu, TableSortTrigger, createTableColumnHelper } from "./components/Table/index.js";
+export { EDITABLE_CELL_COLUMN_META, EditableSelectCell, EditableTextCell, Table, TableActionBar, TableColumnMenu, TableColumnMenuHideItem, TableColumnMenuMoveLeftItem, TableColumnMenuMoveRightItem, TableColumnMenuPinItem, TableColumnMenuSortItem, TableEmptyState, TableSettingsMenu, TableSortTrigger, createTableColumnHelper, editableCellVariants } from "./components/Table/index.js";
 export { Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger } from "./components/Tabs/index.js";
 export { Tag, TagClose } from "./components/Tag/index.js";
 export { Text } from "./components/Text/index.js";