@wallarm-org/design-system 0.39.1 → 0.40.0-rc-feature-AS-982.1

package/dist/components/FilterInput/FilterInputContext/types.d.ts

@@ -26,6 +26,12 @@ export interface FilterInputContextValue {
     /** Click on a segment of the *building* (in-progress) chip — re-opens the
      *  corresponding menu and enters inline-edit without committing the chip. */
     onBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
+    /** Switch the inline-edit to a different segment within the chip currently
+     *  being edited — used by Backspace-on-empty to walk back through segments. */
+    onSwitchEditSegment: (targetSegment: ChipSegment) => boolean;
+    /** Remove the chip currently being edited inline — used by Backspace on an
+     *  empty attribute segment when operator/value are absent. */
+    onRemoveEditingChip: () => void;
     onConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     onChipRemove: (chipId: string) => void;
     onClear: () => void;

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.d.ts

@@ -11,6 +11,8 @@ interface AutocompleteForContext {
     handleInputClick: () => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
     handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
+    switchEditSegment: (targetSegment: ChipSegment) => boolean;
+    removeEditingChip: () => void;
     handleConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.js

@@ -17,6 +17,8 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onInputClick: autocomplete.handleInputClick,
             onChipClick: autocomplete.handleChipClick,
             onBuildingChipClick: autocomplete.handleBuildingChipClick,
+            onSwitchEditSegment: autocomplete.switchEditSegment,
+            onRemoveEditingChip: autocomplete.removeEditingChip,
             onConnectorChange: autocomplete.handleConnectorChange,
             onChipRemove: autocomplete.handleChipRemove,
             onClear: autocomplete.handleClear,
@@ -47,6 +49,8 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleInputClick,
         autocomplete.handleChipClick,
         autocomplete.handleBuildingChipClick,
+        autocomplete.switchEditSegment,
+        autocomplete.removeEditingChip,
         autocomplete.handleConnectorChange,
         autocomplete.handleChipRemove,
         autocomplete.handleClear,

package/dist/components/FilterInput/FilterInputField/FilterInputField.js

@@ -1,21 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
 import { cn } from "../../../utils/cn.js";
 import { inputVariants } from "../../Input/classes.js";
 import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
 import { useFilterInputContext } from "../FilterInputContext/index.js";
-import { isMenuRelated } from "../lib/index.js";
 import { ChipsWithGaps, TrailingGap } from "./ChipsWithGaps.js";
 import { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, filterInputContainerVariants, filterInputInnerVariants } from "./classes.js";
 import { EditingProvider } from "./FilterInputChip/context/EditingContext.js";
 import { FilterInputChip } from "./FilterInputChip/FilterInputChip.js";
-import { SEGMENT_VARIANT } from "./FilterInputChip/segmentVariant.js";
 import { FilterInputFieldActions } from "./FilterInputFieldActions.js";
 import { FilterInputSearch } from "./FilterInputSearch.js";
 import { useChipsSplitting } from "./hooks/useChipsSplitting.js";
 import { useExpandCollapse } from "./hooks/useExpandCollapse.js";
+import { useSegmentEditKeyboard } from "./hooks/useSegmentEditKeyboard.js";
 const FilterInputField = ({ className, ...props })=>{
-    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, menuRef } = useFilterInputContext();
+    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip, menuRef } = useFilterInputContext();
     const hasContent = chips.length > 0 || null != buildingChipData;
     const { isExpanded, isOverflowing, innerRef, toggleExpand, multiRow } = useExpandCollapse();
     const { chipsBefore, chipsAfter, hideTrailingGap, hideLeadingGap } = useChipsSplitting(chips, insertIndex, insertAfterConnector);
@@ -25,47 +23,20 @@ const FilterInputField = ({ className, ...props })=>{
         onChipRemove,
         onGapClick
     };
-    const handleSegmentEditKeyDown = useCallback((e)=>{
-        if ('Escape' === e.key) {
-            e.preventDefault();
-            onCancelSegmentEdit();
-            return;
-        }
-        if ('Enter' === e.key && !e.defaultPrevented) {
-            if (editingSegment === SEGMENT_VARIANT.value) {
-                e.preventDefault();
-                onCustomValueCommit(segmentFilterText);
-                return;
-            }
-            if (editingSegment === SEGMENT_VARIANT.attribute) {
-                e.preventDefault();
-                onCustomAttributeCommit(segmentFilterText);
-                return;
-            }
-            if (editingSegment === SEGMENT_VARIANT.operator) {
-                e.preventDefault();
-                onCustomOperatorCommit(segmentFilterText);
-                return;
-            }
-        }
-        if ('ArrowDown' === e.key) {
-            e.preventDefault();
-            menuRef.current?.focus();
-        }
-    }, [
-        onCancelSegmentEdit,
+    const { handleSegmentEditKeyDown, handleSegmentEditBlur } = useSegmentEditKeyboard({
+        editingChipId,
         editingSegment,
         segmentFilterText,
+        chips,
+        buildingChipData,
+        menuRef,
+        onCancelSegmentEdit,
         onCustomValueCommit,
         onCustomAttributeCommit,
         onCustomOperatorCommit,
-        menuRef
-    ]);
-    const handleSegmentEditBlur = useCallback((e)=>{
-        if (!isMenuRelated(e.relatedTarget)) onCancelSegmentEdit();
-    }, [
-        onCancelSegmentEdit
-    ]);
+        onSwitchEditSegment,
+        onRemoveEditingChip
+    });
     return /*#__PURE__*/ jsx(EditingProvider, {
         editingChipId: editingChipId,
         editingSegment: editingSegment,

package/dist/components/FilterInput/FilterInputField/hooks/useSegmentEditKeyboard.d.ts

@@ -0,0 +1,36 @@
+import type { FocusEvent, KeyboardEvent, RefObject } from 'react';
+import type { BuildingChipData } from '../../FilterInputContext/types';
+import type { FilterInputChipData } from '../../types';
+import { type ChipSegment } from '../FilterInputChip';
+interface UseSegmentEditKeyboardOptions {
+    editingChipId: string | null;
+    editingSegment: ChipSegment | null;
+    segmentFilterText: string;
+    chips: FilterInputChipData[];
+    buildingChipData: BuildingChipData | null;
+    menuRef: RefObject<HTMLDivElement | null>;
+    onCancelSegmentEdit: () => void;
+    onCustomValueCommit: (text: string) => void;
+    onCustomAttributeCommit: (text: string) => void;
+    onCustomOperatorCommit: (text: string) => void;
+    onSwitchEditSegment: (target: ChipSegment) => boolean;
+    onRemoveEditingChip: () => void;
+}
+/**
+ * Keyboard handlers for a chip segment's inline-edit input:
+ *
+ * - Escape cancels.
+ * - Backspace on an empty input walks the cascade (value → operator →
+ *   attribute) and, if the attribute is empty with no operator/value left,
+ *   removes the chip.
+ * - Enter commits the typed text via the segment-specific commit callback.
+ * - ArrowDown moves focus into the open menu.
+ *
+ * Returns the keydown + blur handlers fed to `EditingProvider` so every
+ * segment input dispatches through the same logic.
+ */
+export declare const useSegmentEditKeyboard: ({ editingChipId, editingSegment, segmentFilterText, chips, buildingChipData, menuRef, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip, }: UseSegmentEditKeyboardOptions) => {
+    handleSegmentEditKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleSegmentEditBlur: (e: FocusEvent<HTMLInputElement>) => void;
+};
+export {};

package/dist/components/FilterInput/FilterInputField/hooks/useSegmentEditKeyboard.js

@@ -0,0 +1,77 @@
+import { useCallback } from "react";
+import { isMenuRelated } from "../../lib/index.js";
+import { SEGMENT_VARIANT } from "../FilterInputChip/index.js";
+const useSegmentEditKeyboard = ({ editingChipId, editingSegment, segmentFilterText, chips, buildingChipData, menuRef, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip })=>{
+    const handleSegmentEditKeyDown = useCallback((e)=>{
+        if ('Escape' === e.key) {
+            e.preventDefault();
+            onCancelSegmentEdit();
+            return;
+        }
+        if ('Backspace' === e.key && '' === segmentFilterText) {
+            if (editingSegment === SEGMENT_VARIANT.attribute) {
+                const chipForEdit = editingChipId ? chips.find((c)=>c.id === editingChipId && 'chip' === c.variant) : null;
+                const operator = chipForEdit?.operator ?? buildingChipData?.operator ?? '';
+                if (!operator) {
+                    e.preventDefault();
+                    onRemoveEditingChip();
+                }
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.operator) {
+                e.preventDefault();
+                onSwitchEditSegment(SEGMENT_VARIANT.attribute);
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.value) {
+                e.preventDefault();
+                onSwitchEditSegment(SEGMENT_VARIANT.operator);
+                return;
+            }
+        }
+        if ('Enter' === e.key && !e.defaultPrevented) {
+            if (editingSegment === SEGMENT_VARIANT.value) {
+                e.preventDefault();
+                onCustomValueCommit(segmentFilterText);
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.attribute) {
+                e.preventDefault();
+                onCustomAttributeCommit(segmentFilterText);
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.operator) {
+                e.preventDefault();
+                onCustomOperatorCommit(segmentFilterText);
+                return;
+            }
+        }
+        if ('ArrowDown' === e.key) {
+            e.preventDefault();
+            menuRef.current?.focus();
+        }
+    }, [
+        onCancelSegmentEdit,
+        editingSegment,
+        segmentFilterText,
+        onCustomValueCommit,
+        onCustomAttributeCommit,
+        onCustomOperatorCommit,
+        onSwitchEditSegment,
+        onRemoveEditingChip,
+        editingChipId,
+        chips,
+        buildingChipData,
+        menuRef
+    ]);
+    const handleSegmentEditBlur = useCallback((e)=>{
+        if (!isMenuRelated(e.relatedTarget)) onCancelSegmentEdit();
+    }, [
+        onCancelSegmentEdit
+    ]);
+    return {
+        handleSegmentEditKeyDown,
+        handleSegmentEditBlur
+    };
+};
+export { useSegmentEditKeyboard };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/getInitialSegmentText.d.ts

@@ -0,0 +1,9 @@
+import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
+import type { FieldMetadata, FilterOperator } from '../../types';
+/**
+ * Initial text shown in a building chip's inline-edit input for the given
+ * segment. Mirrors what the chip is currently displaying so the user can
+ * backspace through it (segment-click reopen + Backspace cascade share this
+ * derivation, hence the standalone helper).
+ */
+export declare const getInitialSegmentText: (segment: ChipSegment, selectedField: FieldMetadata, selectedOperator: FilterOperator | null, buildingMultiValue: string | undefined) => string;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/getInitialSegmentText.js

@@ -0,0 +1,8 @@
+import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
+import { getOperatorLabel } from "../../lib/index.js";
+const getInitialSegmentText = (segment, selectedField, selectedOperator, buildingMultiValue)=>{
+    if (segment === SEGMENT_VARIANT.attribute) return selectedField.label;
+    if (segment === SEGMENT_VARIANT.operator) return selectedOperator ? getOperatorLabel(selectedOperator, selectedField.type) : '';
+    return buildingMultiValue ?? '';
+};
+export { getInitialSegmentText };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipCascade.d.ts

@@ -0,0 +1,45 @@
+import type { MutableRefObject, RefObject } from 'react';
+import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
+import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
+interface UseChipCascadeOptions {
+    editing: {
+        editingChipId: string | null;
+        editingSegment: ChipSegment | null;
+        startBuildingEdit: (segment: ChipSegment, currentText: string) => void;
+        switchEditSegment: (segment: ChipSegment, currentText: string) => void;
+    };
+    chips: FilterInputChipData[];
+    fields: FieldMetadata[];
+    conditionsRef: MutableRefObject<Condition[]>;
+    effectiveInsertIndexRef: RefObject<number>;
+    selectedField: FieldMetadata | null;
+    selectedOperator: FilterOperator | null;
+    buildingMultiValue: string | undefined;
+    upsertCondition: UpsertCondition;
+    removeCondition: (chipId: string) => void;
+    resetState: (continueBuilding?: boolean) => void;
+    setInputText: (text: string) => void;
+    setMenuState: (state: MenuState) => void;
+    setSelectedOperator: (op: FilterOperator | null) => void;
+    setBuildingMultiValue: (val: string | undefined) => void;
+    setInsertIndex: (fn: (prev: number | null) => number | null) => void;
+}
+/**
+ * Backspace-driven cascade for chip segments. Bundles three closely related
+ * actions so consumers don't have to wire them piecemeal:
+ *
+ * - `switchEditSegment` — walks inline-edit one segment to the left (value
+ *   → operator → attribute). The source segment's chip data is cleared so
+ *   the just-emptied text does not re-render after the switch.
+ * - `removeEditingChip` — drops the chip currently being edited (building
+ *   reset or committed `removeCondition` + insertIndex bookkeeping).
+ * - `stepBackBuildingMenu` — from the main input during building, enters
+ *   inline-edit on the previous segment with its text pre-selected, mirroring
+ *   the segment-click + cascade UX.
+ */
+export declare const useChipCascade: ({ editing, chips, fields, conditionsRef, effectiveInsertIndexRef, selectedField, selectedOperator, buildingMultiValue, upsertCondition, removeCondition, resetState, setInputText, setMenuState, setSelectedOperator, setBuildingMultiValue, setInsertIndex, }: UseChipCascadeOptions) => {
+    switchEditSegment: (targetSegment: ChipSegment) => boolean;
+    removeEditingChip: () => void;
+    stepBackBuildingMenu: (current: "field" | "operator" | "value") => void;
+};
+export {};

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipCascade.js

@@ -0,0 +1,103 @@
+import { useCallback } from "react";
+import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
+import { SEGMENT_TO_MENU, chipIdToConditionIndex } from "../../lib/index.js";
+import { getInitialSegmentText } from "./getInitialSegmentText.js";
+const useChipCascade = ({ editing, chips, fields, conditionsRef, effectiveInsertIndexRef, selectedField, selectedOperator, buildingMultiValue, upsertCondition, removeCondition, resetState, setInputText, setMenuState, setSelectedOperator, setBuildingMultiValue, setInsertIndex })=>{
+    const switchEditSegment = useCallback((targetSegment)=>{
+        const sourceSegment = editing.editingSegment;
+        if (null === sourceSegment) return false;
+        const isBuildingEdit = !editing.editingChipId;
+        if (isBuildingEdit) {
+            if (!selectedField) return false;
+            if (sourceSegment === SEGMENT_VARIANT.value) setBuildingMultiValue(void 0);
+            else if (sourceSegment === SEGMENT_VARIANT.operator) {
+                setSelectedOperator(null);
+                setBuildingMultiValue(void 0);
+            }
+            const initialText = getInitialSegmentText(targetSegment, selectedField, selectedOperator, buildingMultiValue);
+            editing.startBuildingEdit(targetSegment, initialText);
+            setInputText('');
+            setMenuState(SEGMENT_TO_MENU[targetSegment]);
+            return true;
+        }
+        const editingId = editing.editingChipId;
+        if (!editingId) return false;
+        const chip = chips.find((c)=>c.id === editingId);
+        if (!chip || 'chip' !== chip.variant) return false;
+        const idx = chipIdToConditionIndex(editingId);
+        const condition = null !== idx ? conditionsRef.current[idx] : null;
+        const field = condition ? fields.find((f)=>f.name === condition.field) : null;
+        if (condition && field) {
+            if (sourceSegment === SEGMENT_VARIANT.value) upsertCondition(field, condition.operator, null, editingId, void 0, void 0, condition.dateOrigin);
+            else if (sourceSegment === SEGMENT_VARIANT.operator) upsertCondition(field, void 0, condition.value, editingId, void 0, void 0, condition.dateOrigin);
+        }
+        const targetText = targetSegment === SEGMENT_VARIANT.attribute ? chip.attribute ?? '' : targetSegment === SEGMENT_VARIANT.operator ? chip.operator ?? '' : '';
+        editing.switchEditSegment(targetSegment, targetText);
+        setMenuState(SEGMENT_TO_MENU[targetSegment]);
+        return true;
+    }, [
+        editing,
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        chips,
+        fields,
+        conditionsRef,
+        upsertCondition,
+        setBuildingMultiValue,
+        setSelectedOperator,
+        setInputText,
+        setMenuState
+    ]);
+    const removeEditingChip = useCallback(()=>{
+        if (null === editing.editingSegment) return;
+        const editingId = editing.editingChipId;
+        if (!editingId) return void resetState();
+        const chipCondIdx = chipIdToConditionIndex(editingId);
+        if (null !== chipCondIdx && chipCondIdx < effectiveInsertIndexRef.current) setInsertIndex((prev)=>null != prev ? prev - 1 : prev);
+        removeCondition(editingId);
+        resetState();
+    }, [
+        editing,
+        removeCondition,
+        resetState,
+        effectiveInsertIndexRef,
+        setInsertIndex
+    ]);
+    const stepBackBuildingMenu = useCallback((current)=>{
+        if (!selectedField) return void resetState();
+        if ('value' === current) {
+            setBuildingMultiValue(void 0);
+            setInputText('');
+            const operatorText = getInitialSegmentText(SEGMENT_VARIANT.operator, selectedField, selectedOperator, buildingMultiValue);
+            editing.startBuildingEdit(SEGMENT_VARIANT.operator, operatorText);
+            setMenuState('operator');
+            return;
+        }
+        if ('operator' === current) {
+            setSelectedOperator(null);
+            setBuildingMultiValue(void 0);
+            setInputText('');
+            editing.startBuildingEdit(SEGMENT_VARIANT.attribute, selectedField.label);
+            setMenuState('field');
+            return;
+        }
+        resetState();
+    }, [
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        editing,
+        resetState,
+        setBuildingMultiValue,
+        setInputText,
+        setMenuState,
+        setSelectedOperator
+    ]);
+    return {
+        switchEditSegment,
+        removeEditingChip,
+        stepBackBuildingMenu
+    };
+};
+export { useChipCascade };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.d.ts

@@ -27,6 +27,7 @@ export declare const useChipEditing: ({ conditions, chips, fields, containerRef,
     resetSegmentTyping: () => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
     startBuildingEdit: (segment: ChipSegment, currentText: string) => void;
+    switchEditSegment: (segment: ChipSegment, currentText: string) => void;
     clearEditing: () => void;
 };
 export {};

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.js

@@ -1,15 +1,10 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { chipIdToConditionIndex, getOperatorFromLabel, isNoValueOperator } from "../../lib/index.js";
+import { SEGMENT_TO_MENU, chipIdToConditionIndex, getOperatorFromLabel, isNoValueOperator } from "../../lib/index.js";
 const getConditionByChipId = (chipId, conditions)=>{
     const idx = chipIdToConditionIndex(chipId);
     return null !== idx ? conditions[idx] ?? null : null;
 };
-const SEGMENT_TO_MENU = {
-    attribute: 'field',
-    operator: 'operator',
-    value: 'value'
-};
 const getFirstIncompleteSegment = (condition, fields)=>{
     const field = fields.find((f)=>f.name === condition.field);
     if (!field || condition.error === SEGMENT_VARIANT.attribute) return SEGMENT_VARIANT.attribute;
@@ -74,6 +69,11 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         setSegmentFilterText(currentText);
         setUserHasTyped(false);
     }, []);
+    const switchEditSegment = useCallback((segment, currentText)=>{
+        setEditingSegment(segment);
+        setSegmentFilterText(currentText);
+        setUserHasTyped(false);
+    }, []);
     const handleSegmentFilterChange = useCallback((text)=>{
         setSegmentFilterText(text);
         setUserHasTyped(true);
@@ -93,6 +93,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
             resetSegmentTyping,
             handleChipClick,
             startBuildingEdit,
+            switchEditSegment,
             clearEditing
         }), [
         editingChipId,
@@ -103,6 +104,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         resetSegmentTyping,
         handleChipClick,
         startBuildingEdit,
+        switchEditSegment,
         clearEditing
     ]);
 };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.d.ts

@@ -54,6 +54,8 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     resetAutocompleteState: (continueBuilding?: boolean) => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
     handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
+    switchEditSegment: (targetSegment: ChipSegment) => boolean;
+    removeEditingChip: () => void;
     handleConnectorChange: (connectorId: string, value: "and" | "or") => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.js

@@ -1,10 +1,12 @@
 import { useCallback, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
-import { applyAcceptChar, getOperatorLabel } from "../../lib/index.js";
+import { SEGMENT_TO_MENU, applyAcceptChar } from "../../lib/index.js";
 import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
+import { getInitialSegmentText } from "./getInitialSegmentText.js";
 import { useBlurCommit } from "./useBlurCommit.js";
 import { useChipActions } from "./useChipActions.js";
+import { useChipCascade } from "./useChipCascade.js";
 import { useChipEditing } from "./useChipEditing.js";
 import { useFocusManagement } from "./useFocusManagement.js";
 import { useInputHandlers } from "./useInputHandlers.js";
@@ -83,6 +85,24 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setMenuState,
         setBuildingMultiValue
     });
+    const { switchEditSegment, removeEditingChip, stepBackBuildingMenu } = useChipCascade({
+        editing,
+        chips,
+        fields,
+        conditionsRef,
+        effectiveInsertIndexRef,
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        upsertCondition,
+        removeCondition,
+        resetState,
+        setInputText,
+        setMenuState,
+        setSelectedOperator,
+        setBuildingMultiValue,
+        setInsertIndex
+    });
     const { handleInputChange, handleInputClick, handleKeyDown, menuRef } = useInputHandlers({
         inputText,
         menuState,
@@ -101,7 +121,8 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         removeConditionAtIndex,
         handleFieldSelect,
         handleOperatorSelect,
-        handleCustomValueCommit
+        handleCustomValueCommit,
+        stepBackBuildingMenu
     });
     const { commitBuildingOnBlur, hasIncompleteBuilding } = useBlurCommit({
         selectedField,
@@ -193,10 +214,10 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         if (!selectedField) return;
         const containerRect = containerRef.current?.getBoundingClientRect();
         setMenuOffset(containerRect ? anchorRect.left - containerRect.left : 0);
-        const initialText = segment === SEGMENT_VARIANT.attribute ? selectedField.label : segment === SEGMENT_VARIANT.operator ? selectedOperator ? getOperatorLabel(selectedOperator, selectedField.type) : '' : buildingMultiValue ?? '';
+        const initialText = getInitialSegmentText(segment, selectedField, selectedOperator, buildingMultiValue);
         editing.startBuildingEdit(segment, initialText);
         setInputText('');
-        setMenuState(segment === SEGMENT_VARIANT.attribute ? 'field' : segment === SEGMENT_VARIANT.operator ? 'operator' : 'value');
+        setMenuState(SEGMENT_TO_MENU[segment]);
     }, [
         selectedField,
         selectedOperator,
@@ -229,6 +250,8 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         resetAutocompleteState: resetState,
         handleChipClick: editing.handleChipClick,
         handleBuildingChipClick,
+        switchEditSegment,
+        removeEditingChip,
         handleConnectorChange: setConnectorValue,
         handleChipRemove,
         handleClear,

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useInputHandlers.d.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, KeyboardEvent, MutableRefObject, RefObject } from 'react';
 import type { Condition, FieldMetadata, FilterOperator, MenuState } from '../../types';
+type BuildingStep = 'field' | 'operator' | 'value';
 interface UseInputHandlersDeps {
     inputText: string;
     menuState: MenuState;
@@ -21,8 +22,13 @@ interface UseInputHandlersDeps {
     handleFieldSelect: (field: FieldMetadata) => void;
     handleOperatorSelect: (operator: FilterOperator) => void;
     handleCustomValueCommit: (text: string) => void;
+    /** Step the building chip one segment back (value → operator → field).
+     *  Called on Backspace from an empty main input while a building chip is
+     *  alive. At the field step (only attribute remains) it tears the chip
+     *  down entirely. */
+    stepBackBuildingMenu: (current: BuildingStep) => void;
 }
-export declare const useInputHandlers: ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, }: UseInputHandlersDeps) => {
+export declare const useInputHandlers: ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, stepBackBuildingMenu, }: UseInputHandlersDeps) => {
     handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
     handleInputClick: () => void;
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useInputHandlers.js

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
 import { OPERATOR_SYMBOLS, applyAcceptChar, getOperatorFromLabel, hasFieldValues, nextBuildingMenu } from "../../lib/index.js";
-const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit })=>{
+const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, stepBackBuildingMenu })=>{
     const menuRef = useRef(null);
     const handleInputChange = useCallback((e)=>{
         let text = e.target.value;
@@ -72,17 +72,24 @@ const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperato
             handleCustomValueCommit(inputText);
             return;
         }
-        if ('Backspace' === e.key && !e.repeat && '' === inputText && conditionsLengthRef.current > 0) {
-            e.preventDefault();
-            const removeIdx = effectiveInsertIndexRef.current - 1;
-            if (removeIdx >= 0 && !conditionsRef.current[removeIdx]?.disabled) {
-                removeConditionAtIndex(removeIdx);
-                setInsertIndex((prev)=>{
-                    const eff = prev ?? conditionsLengthRef.current;
-                    return eff > 0 ? eff - 1 : 0;
-                });
+        if ('Backspace' === e.key && !e.repeat && '' === inputText) {
+            if (selectedField && ('value' === menuState || 'operator' === menuState || 'field' === menuState)) {
+                e.preventDefault();
+                stepBackBuildingMenu(menuState);
+                return;
+            }
+            if (conditionsLengthRef.current > 0) {
+                e.preventDefault();
+                const removeIdx = effectiveInsertIndexRef.current - 1;
+                if (removeIdx >= 0 && !conditionsRef.current[removeIdx]?.disabled) {
+                    removeConditionAtIndex(removeIdx);
+                    setInsertIndex((prev)=>{
+                        const eff = prev ?? conditionsLengthRef.current;
+                        return eff > 0 ? eff - 1 : 0;
+                    });
+                }
+                setMenuState('closed');
             }
-            setMenuState('closed');
         }
     }, [
         inputText,
@@ -98,7 +105,8 @@ const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperato
         setInsertIndex,
         conditionsRef,
         conditionsLengthRef,
-        effectiveInsertIndexRef
+        effectiveInsertIndexRef,
+        stepBackBuildingMenu
     ]);
     return {
         handleInputChange,

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useMenuFlow.js

@@ -25,6 +25,15 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
             const idx = chipIdToConditionIndex(editing.editingChipId);
             const condition = null !== idx ? conditionsRef.current[idx] : null;
             if (condition) {
+                if (!condition.operator) {
+                    upsertCondition(field, void 0, condition.value, editing.editingChipId, void 0, void 0, condition.dateOrigin);
+                    setSelectedField(field);
+                    setSelectedOperator(null);
+                    editing.setEditingSegment(SEGMENT_VARIANT.operator);
+                    editing.setSegmentFilterText('');
+                    setMenuState('operator');
+                    return;
+                }
                 const hasValueError = validateValueForField(field, condition.value);
                 upsertCondition(field, condition.operator, condition.value, editing.editingChipId, void 0, hasValueError ? SEGMENT_VARIANT.value : void 0, condition.dateOrigin);
             }
@@ -205,17 +214,13 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
         const idx = chipIdToConditionIndex(editing.editingChipId);
         const condition = null !== idx ? conditionsRef.current[idx] : null;
         if (!condition) return;
-        if (matchedField) {
-            const hasValueError = validateValueForField(matchedField, condition.value);
-            upsertCondition(matchedField, condition.operator, condition.value, editing.editingChipId, void 0, hasValueError ? SEGMENT_VARIANT.value : void 0, condition.dateOrigin);
-        } else {
-            const syntheticField = {
-                name: trimmed,
-                label: trimmed,
-                type: 'string'
-            };
-            upsertCondition(syntheticField, condition.operator, condition.value, editing.editingChipId, void 0, SEGMENT_VARIANT.attribute, condition.dateOrigin);
-        }
+        if (matchedField) return void handleFieldSelect(matchedField);
+        const syntheticField = {
+            name: trimmed,
+            label: trimmed,
+            type: 'string'
+        };
+        upsertCondition(syntheticField, condition.operator, condition.value, editing.editingChipId, void 0, SEGMENT_VARIANT.attribute, condition.dateOrigin);
         resetState();
     }, [
         editing,

package/dist/components/FilterInput/lib/index.d.ts

@@ -11,5 +11,6 @@ export { filterAndSort } from './filterSort';
 export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
 export { getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, NO_VALUE_PLACEHOLDER, nextBuildingMenu, } from './operators';
 export { type FilterParseError, isFilterParseError, parseExpression } from './parseExpression';
+export { SEGMENT_TO_MENU } from './segmentMenu';
 export { serializeExpression } from './serializeExpression';
 export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';

package/dist/components/FilterInput/lib/index.js

@@ -10,6 +10,7 @@ import { filterAndSort } from "./filterSort.js";
 import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.js";
 import { NO_VALUE_PLACEHOLDER, getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu } from "./operators.js";
 import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
+import { SEGMENT_TO_MENU } from "./segmentMenu.js";
 import { serializeExpression } from "./serializeExpression.js";
 import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
-export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, NO_VALUE_PLACEHOLDER, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findOptionByValue, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldOperators, getFieldValues, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isBuildingComplete, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression };
+export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, NO_VALUE_PLACEHOLDER, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, SEGMENT_TO_MENU, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findOptionByValue, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldOperators, getFieldValues, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isBuildingComplete, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression };

package/dist/components/FilterInput/lib/segmentMenu.d.ts

@@ -0,0 +1,9 @@
+import { type SegmentVariant } from '../FilterInputField/FilterInputChip/segmentVariant';
+import type { MenuState } from '../types';
+/**
+ * Open-menu state that corresponds to each chip segment. Used wherever an
+ * inline-edit transition needs to (re)open the matching menu — segment
+ * click, Backspace cascade, and the building-flow step-back from the main
+ * input. Kept here so the mapping is defined once.
+ */
+export declare const SEGMENT_TO_MENU: Record<SegmentVariant, MenuState>;

package/dist/components/FilterInput/lib/segmentMenu.js

@@ -0,0 +1,7 @@
+import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/segmentVariant.js";
+const SEGMENT_TO_MENU = {
+    [SEGMENT_VARIANT.attribute]: 'field',
+    [SEGMENT_VARIANT.operator]: 'operator',
+    [SEGMENT_VARIANT.value]: 'value'
+};
+export { SEGMENT_TO_MENU };

package/dist/components/SimpleCharts/LineChart/LineChartLine.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext, useEffect } from "react";
 import { Line } from "recharts";
-import { LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_DASH_DASHARRAY, LINE_INACTIVE_OPACITY, LINE_STROKE_FILL, LINE_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
+import { LINE_ACTIVE_DOT_RADIUS, LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_DASH_DASHARRAY, LINE_INACTIVE_OPACITY, LINE_STROKE_FILL, LINE_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
 import { LineChartActiveContext, LineChartDataContext } from "./LineChartContext.js";
 import { warnLineChartLine } from "./lib/warn.js";
 const wrap = (cb)=>cb ? (_props, event)=>cb(event) : void 0;
@@ -34,7 +34,11 @@ const LineChartLine = ({ seriesKey, curve = 'monotone', disableAnimation = false
         strokeLinecap: "round",
         strokeLinejoin: "round",
         dot: false,
-        activeDot: false,
+        activeDot: {
+            r: LINE_ACTIVE_DOT_RADIUS,
+            stroke,
+            strokeWidth: 0
+        },
         opacity: opacity,
         connectNulls: connectNulls,
         isAnimationActive: disableAnimation ? false : 'auto',

package/dist/components/SimpleCharts/LineChart/LineChartTooltip.js

@@ -2,15 +2,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { Tooltip, usePlotArea } from "recharts";
 import { lineChartTooltipCenterClasses } from "./classes.js";
-import { HOVER_POPOVER_TOP, LINE_CURSOR_DASHARRAY } from "./constants.js";
+import { HOVER_POPOVER_TOP } from "./constants.js";
 import { LineChartDataContext, LineChartSelectionContext, LineChartZoomContext } from "./LineChartContext.js";
 import { LineChartHoverPopover } from "./LineChartHoverPopover.js";
 import { LineChartHoverPopoverRow } from "./LineChartHoverPopoverRow.js";
 import { LineChartHoverPopoverTimestamp } from "./LineChartHoverPopoverTimestamp.js";
 const TOOLTIP_CURSOR = {
-    stroke: 'var(--color-border-strong-primary)',
+    stroke: 'var(--color-border-primary-light)',
     strokeWidth: 1,
-    strokeDasharray: LINE_CURSOR_DASHARRAY
+    strokeDasharray: '4 4'
 };
 const TOOLTIP_ALLOW_ESCAPE = {
     x: false,

package/dist/components/SimpleCharts/LineChart/LineChartXAxis.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { XAxis } from "recharts";
+import { LINE_AXIS_TICK_TEXT_PROPS } from "./constants.js";
 import { LineChartDataContext } from "./LineChartContext.js";
-import { renderAxisTick } from "./lib/renderAxisTick.js";
 const DENSITY_MIN_TICK_GAP = {
     sparse: 64,
     normal: 32,
@@ -11,16 +11,7 @@ const DENSITY_MIN_TICK_GAP = {
 const AXIS_LINE_PROPS = {
     stroke: 'var(--color-border-primary-light)'
 };
-const renderTick = renderAxisTick(({ index, visibleTicksCount })=>{
-    if (0 === index) return {
-        anchor: 'start'
-    };
-    if (index === visibleTicksCount - 1) return {
-        anchor: 'end'
-    };
-    return {};
-});
-const LineChartXAxis = ({ tickFormatter, density, interval = 'preserveStartEnd', tickCount, ticks, minTickGap, domain, padding, type, hideTicks = false, axisLine = true })=>{
+const LineChartXAxis = ({ tickFormatter, density, interval, tickCount, ticks, minTickGap, domain, padding, type, hideTicks = false, axisLine = true })=>{
     const dataCtx = useContext(LineChartDataContext);
     const xKey = dataCtx?.xKey ?? 'x';
     const resolvedMinTickGap = minTickGap ?? (density ? DENSITY_MIN_TICK_GAP[density] : void 0);
@@ -29,7 +20,7 @@ const LineChartXAxis = ({ tickFormatter, density, interval = 'preserveStartEnd',
         type: type,
         tickLine: false,
         axisLine: axisLine ? AXIS_LINE_PROPS : false,
-        tick: hideTicks ? false : renderTick,
+        tick: hideTicks ? false : LINE_AXIS_TICK_TEXT_PROPS,
         tickFormatter: tickFormatter,
         interval: interval,
         tickCount: tickCount,

package/dist/components/SimpleCharts/LineChart/LineChartYAxis.js

@@ -1,10 +1,19 @@
 import { jsx } from "react/jsx-runtime";
-import { YAxis } from "recharts";
-import { LINE_Y_LABEL_WIDTH } from "./constants.js";
-import { renderAxisTick } from "./lib/renderAxisTick.js";
-const renderTick = renderAxisTick(({ index, visibleTicksCount })=>({
-        skip: index === visibleTicksCount - 1
-    }));
+import { Text, YAxis } from "recharts";
+import { LINE_AXIS_TICK_TEXT_PROPS, LINE_Y_LABEL_WIDTH } from "./constants.js";
+const renderTick = (props)=>{
+    const { x, y, payload, visibleTicksCount, textAnchor, verticalAnchor, tickFormatter, index } = props;
+    if (index === visibleTicksCount - 1) return null;
+    const value = tickFormatter ? tickFormatter(payload.value, payload.index) : payload.value;
+    return /*#__PURE__*/ jsx(Text, {
+        x: x,
+        y: y,
+        textAnchor: textAnchor,
+        verticalAnchor: verticalAnchor,
+        ...LINE_AXIS_TICK_TEXT_PROPS,
+        children: value
+    });
+};
 const LineChartYAxis = ({ tickFormatter, tickCount, ticks, domain, padding, width = LINE_Y_LABEL_WIDTH, hideTicks = false })=>/*#__PURE__*/ jsx(YAxis, {
         width: width,
         tickLine: false,

package/dist/components/SimpleCharts/LineChart/LineChartZoomBrush.js

@@ -1,8 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
-import { ReferenceArea, usePlotArea } from "recharts";
-import { formatChartDateTime } from "../lib/timeFormatters.js";
+import { ReferenceArea } from "recharts";
 import { lineChartZoomCursorPopoverClasses } from "./classes.js";
 import { useZoomPendingListeners } from "./hooks/useZoomPendingListeners.js";
 import { LineChartDataContext, LineChartZoomContext } from "./LineChartContext.js";
@@ -10,24 +9,12 @@ import { LineChartZoomPopover } from "./LineChartZoomPopover.js";
 import { LineChartZoomPopoverConfirm } from "./LineChartZoomPopoverConfirm.js";
 import { LineChartZoomPopoverRange } from "./LineChartZoomPopoverRange.js";
 import { formatRange as formatRange_js_formatRange } from "./lib/formatRange.js";
-const defaultFormatRange = formatRange_js_formatRange((value)=>formatChartDateTime(value) || String(value));
 const POPOVER_OFFSET_X = 12;
-const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange, confirmLabel = 'Zoom in', container })=>{
+const POPOVER_OFFSET_Y = 12;
+const LineChartZoomBrush = ({ disabled = false, formatRange = formatRange_js_formatRange, confirmLabel = 'Zoom in', container })=>{
     const dataCtx = useContext(LineChartDataContext);
     const zoomCtx = useContext(LineChartZoomContext);
     const popoverRef = useRef(null);
-    const plotArea = usePlotArea();
-    const rootRef = zoomCtx?.rootRef;
-    const centerY = useMemo(()=>{
-        if (!plotArea || !rootRef?.current) return null;
-        const surface = rootRef.current.querySelector('.recharts-surface');
-        if (!surface) return null;
-        const rect = surface.getBoundingClientRect();
-        return rect.top + plotArea.y + plotArea.height / 2;
-    }, [
-        plotArea,
-        rootRef
-    ]);
     const registerEnabled = zoomCtx?.registerEnabled;
     useEffect(()=>{
         if (disabled || !registerEnabled) return;
@@ -40,6 +27,7 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
     const pending = zoomCtx?.pending ?? null;
     const cancelPending = zoomCtx?.cancelPending;
     const confirmZoom = zoomCtx?.confirmZoom;
+    const rootRef = zoomCtx?.rootRef;
     useZoomPendingListeners({
         enabled: null !== pending,
         rootRef,
@@ -79,9 +67,9 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
         "data-zoom-state": isPending ? 'pending' : 'dragging',
         className: lineChartZoomCursorPopoverClasses,
         style: {
-            top: centerY ?? popoverPosition.clientY,
+            top: popoverPosition.clientY - POPOVER_OFFSET_Y,
             left: popoverPosition.clientX + POPOVER_OFFSET_X,
-            transform: 'translateY(-50%)',
+            transform: 'translateY(-100%)',
             pointerEvents: isPending ? 'auto' : 'none'
         },
         onMouseDown: (e)=>e.stopPropagation(),
@@ -104,7 +92,8 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
                 x2: range.to,
                 fill: "var(--color-states-primary-hover)",
                 fillOpacity: 1,
-                stroke: "none",
+                stroke: "var(--color-border-primary-light)",
+                strokeOpacity: 1,
                 ifOverflow: "visible"
             }) : null,
             popoverContent ? /*#__PURE__*/ createPortal(popoverContent, container ?? document.body) : null

package/dist/components/SimpleCharts/LineChart/classes.js

@@ -6,7 +6,7 @@ const lineChartZoomCursorPopoverClasses = "fixed z-30 pointer-events-none";
 const lineChartLegendVariants = cva('flex', {
     variants: {
         orientation: {
-            horizontal: 'flex-row flex-wrap items-center gap-6 pl-12 py-2 [&:last-child]:pb-8',
+            horizontal: 'flex-row flex-wrap items-center gap-6 pl-12 py-2',
             vertical: 'flex-col gap-6 px-12 py-2 max-w-160'
         },
         align: {

package/dist/components/SimpleCharts/LineChart/constants.d.ts

@@ -1,8 +1,8 @@
 export { CHART_PALETTE_FILL as LINE_STROKE_FILL, resolveChartColor as resolveSeriesColor, } from '../lib/chartPalette';
 export declare const LINE_STROKE_WIDTH = 2;
 export declare const LINE_DASH_DASHARRAY = "6 4";
+export declare const LINE_ACTIVE_DOT_RADIUS = 4;
 export declare const LINE_GRID_DASHARRAY = "4 4";
-export declare const LINE_CURSOR_DASHARRAY = "4 2";
 export declare const LINE_ANIMATION_DURATION = 400;
 export declare const LINE_ANIMATION_BEGIN = 0;
 export declare const LINE_INACTIVE_OPACITY = 0.3;

package/dist/components/SimpleCharts/LineChart/constants.js

@@ -1,8 +1,8 @@
 import { CHART_PALETTE_FILL, resolveChartColor } from "../lib/chartPalette.js";
 const LINE_STROKE_WIDTH = 2;
 const LINE_DASH_DASHARRAY = '6 4';
+const LINE_ACTIVE_DOT_RADIUS = 4;
 const LINE_GRID_DASHARRAY = '4 4';
-const LINE_CURSOR_DASHARRAY = '4 2';
 const LINE_ANIMATION_DURATION = 400;
 const LINE_ANIMATION_BEGIN = 0;
 const LINE_INACTIVE_OPACITY = 0.3;
@@ -23,4 +23,4 @@ const LINE_AXIS_TICK_TEXT_PROPS = {
     fontFamily: 'var(--font-sans)',
     fontWeight: 400
 };
-export { HOVER_POPOVER_TOP, LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_AXIS_TICK_TEXT_PROPS, LINE_CARD_HEIGHT, LINE_CURSOR_DASHARRAY, LINE_DASH_DASHARRAY, LINE_DEFAULT_BODY_MARGIN, LINE_GRID_DASHARRAY, LINE_HEADER_HEIGHT, LINE_INACTIVE_OPACITY, CHART_PALETTE_FILL as LINE_STROKE_FILL, LINE_STROKE_WIDTH, LINE_X_LABEL_HEIGHT, LINE_Y_LABEL_WIDTH, resolveChartColor as resolveSeriesColor };
+export { HOVER_POPOVER_TOP, LINE_ACTIVE_DOT_RADIUS, LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_AXIS_TICK_TEXT_PROPS, LINE_CARD_HEIGHT, LINE_DASH_DASHARRAY, LINE_DEFAULT_BODY_MARGIN, LINE_GRID_DASHARRAY, LINE_HEADER_HEIGHT, LINE_INACTIVE_OPACITY, CHART_PALETTE_FILL as LINE_STROKE_FILL, LINE_STROKE_WIDTH, LINE_X_LABEL_HEIGHT, LINE_Y_LABEL_WIDTH, resolveChartColor as resolveSeriesColor };

package/dist/components/SimpleCharts/LineChart/lib/formatRange.d.ts

@@ -1,5 +1,9 @@
-/** Higher-order range formatter — joins `format(from)` and `format(to)` with `→`. */
-export declare const formatRange: (format: (value: unknown) => string) => (range: {
-    from: unknown;
-    to: unknown;
-}) => string;
+import type { LineChartZoomRange } from '../LineChartContext';
+/**
+ * Default range text for the zoom popover. Renders as `from → to` using the
+ * shared {@link formatChartDateTime} helper for numeric (timestamp) X values,
+ * which respects the app-level `order` / `hourCycle` defaults from the
+ * `DateFormatProvider`. Falls back to `String(value)` for non-numeric X values.
+ * Consumers override via the `formatRange` prop on `<LineChartZoomBrush>`.
+ */
+export declare const formatRange: (range: LineChartZoomRange) => string;

package/dist/components/SimpleCharts/LineChart/lib/formatRange.js

@@ -1,2 +1,7 @@
-const formatRange = (format)=>(range)=>`${format(range.from)} → ${format(range.to)}`;
+import { formatChartDateTime } from "../../lib/timeFormatters.js";
+const formatRange = (range)=>{
+    const from = formatChartDateTime(range.from) || String(range.from);
+    const to = formatChartDateTime(range.to) || String(range.to);
+    return `${from} → ${to}`;
+};
 export { formatRange };

package/dist/components/SimpleCharts/LineChart/lib/sampleData.js

@@ -3,7 +3,7 @@ const jitter = (i, seed, salt)=>{
     return v - Math.floor(v);
 };
 const genHourly = (count, seed = 1)=>{
-    const start = new Date(2025, 0, 1, 0, 0, 0).getTime();
+    const start = Date.UTC(2025, 0, 1, 0, 0, 0);
     const out = [];
     for(let i = 0; i < count; i++){
         const t = start + 60 * i * 60000;
@@ -20,7 +20,7 @@ const genHourly = (count, seed = 1)=>{
     return out;
 };
 const genDaily = (count)=>{
-    const start = new Date(2024, 0, 1, 0, 0, 0).getTime();
+    const start = Date.UTC(2024, 0, 1, 0, 0, 0);
     const out = [];
     for(let i = 0; i < count; i++){
         const t = start + 24 * i * 3600000;
@@ -90,7 +90,7 @@ const dailyData60 = genDaily(60);
 const hourlyData1000 = genHourly(1000);
 const singlePointData = [
     {
-        timestamp: new Date(2025, 0, 1, 12, 0, 0).getTime(),
+        timestamp: Date.UTC(2025, 0, 1, 12, 0, 0),
         requests: 142
     }
 ];

package/dist/components/SimpleCharts/hooks/useChartTimeFormatters.d.ts

@@ -7,6 +7,11 @@ export interface ChartTimeFormatters {
     formatHourWithTimezone: (value: unknown) => ReactNode;
     formatDateWithTimezone: (value: unknown) => ReactNode;
     formatDateTimeWithTimezone: (value: unknown) => ReactNode;
+    /** `from → to` using `formatDate`. Suitable for `<LineChartZoomBrush formatRange>`. */
+    formatDateRange: (range: {
+        from: unknown;
+        to: unknown;
+    }) => string;
 }
 /**
  * Memoised bundle of chart time formatters bound to `DateFormatProvider`

package/dist/components/SimpleCharts/hooks/useChartTimeFormatters.js

@@ -22,7 +22,8 @@ const useChartTimeFormatters = ()=>{
             formatTimezone: formatChartTimezone,
             formatHourWithTimezone: withTimezoneChip(formatHour),
             formatDateWithTimezone: withTimezoneChip(formatDate),
-            formatDateTimeWithTimezone: withTimezoneChip(formatDateTime)
+            formatDateTimeWithTimezone: withTimezoneChip(formatDateTime),
+            formatDateRange: ({ from, to })=>`${formatDate(from)} → ${formatDate(to)}`
         };
     }, [
         order,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.39.0",
-  "generatedAt": "2026-05-19T14:54:13.372Z",
+  "generatedAt": "2026-05-19T13:23:43.047Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.39.1",
+  "version": "0.40.0-rc-feature-AS-982.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",

package/dist/components/SimpleCharts/LineChart/lib/renderAxisTick.d.ts

@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react';
-import type { TextAnchor } from 'recharts/types/component/Text';
-import type { XAxisTickContentProps, YAxisTickContentProps } from 'recharts/types/util/types';
-export interface AxisTickDecision {
-    /** When `true`, render nothing for this tick. */
-    skip?: boolean;
-    /** Override the axis-derived text anchor. */
-    anchor?: TextAnchor;
-}
-type AxisTickProps = XAxisTickContentProps | YAxisTickContentProps;
-type Decide<T extends AxisTickProps> = (props: T) => AxisTickDecision;
-export declare const renderAxisTick: <T extends AxisTickProps>(decide?: Decide<T>) => (props: T) => ReactNode;
-export {};

package/dist/components/SimpleCharts/LineChart/lib/renderAxisTick.js

@@ -1,20 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Text } from "recharts";
-import { LINE_AXIS_TICK_TEXT_PROPS } from "../constants.js";
-const renderAxisTick = (decide)=>(props)=>{
-        const decision = decide?.(props) ?? {};
-        if (decision.skip) return null;
-        const { x, y, payload, textAnchor, verticalAnchor, tickFormatter, orientation } = props;
-        const value = tickFormatter ? tickFormatter(payload.value, payload.index) : payload.value;
-        const isHorizontal = 'top' === orientation || 'bottom' === orientation;
-        const anchorToCoordinate = null != decision.anchor;
-        return /*#__PURE__*/ jsx(Text, {
-            x: anchorToCoordinate && isHorizontal ? payload.coordinate : x,
-            y: anchorToCoordinate && !isHorizontal ? payload.coordinate : y,
-            textAnchor: decision.anchor ?? textAnchor,
-            verticalAnchor: verticalAnchor,
-            ...LINE_AXIS_TICK_TEXT_PROPS,
-            children: value
-        });
-    };
-export { renderAxisTick };