@wallarm-org/design-system 0.77.4 → 0.77.5

package/dist/components/FilterInput/FilterInputField/FilterInputChip/classes.d.ts

@@ -10,8 +10,10 @@ export declare const segmentContainer = "flex flex-col justify-center overflow-h
 /** Hit target for an empty required value: a small full-height box so the value
  *  is clickable and the trailing × can't sit on top of it (AS-1192). */
 export declare const emptyValueHitTarget = "min-w-[4px] self-stretch";
-/** Min width for the value edit input so an empty freeform value stays clickable. */
-export declare const editingValueMinWidth = "min-w-[3.5rem]";
+/** The value edit input hugs its content (measured width + WIDTH_OFFSET). `min-w-0`
+ *  drops the flex/intrinsic min-width so a short value like "f" isn't forced into a
+ *  wide box; an empty value falls back to the sizer's MIN_INPUT_WIDTH floor. */
+export declare const editingValueMinWidth = "min-w-0";
 /** Segment text styles by variant */
 export declare const segmentTextVariants: (props?: ({
     variant?: "value" | "operator" | "attribute" | null | undefined;

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

@@ -36,7 +36,7 @@ const chipVariants = cva(`h-22 group/chip relative flex items-center justify-cen
 });
 const segmentContainer = 'flex flex-col justify-center overflow-hidden leading-none';
 const emptyValueHitTarget = 'min-w-[4px] self-stretch';
-const editingValueMinWidth = 'min-w-[3.5rem]';
+const editingValueMinWidth = 'min-w-0';
 const segmentTextVariants = cva('truncate text-sm', {
     variants: {
         variant: {

package/dist/components/FilterInput/FilterInputField/FilterInputChip/constants.d.ts

@@ -1,9 +1,11 @@
 /** Minimum input width in px */
 export declare const MIN_INPUT_WIDTH = 4;
-/** Maximum input width in px — caps the content-sized input so a long value
- *  can't grow it past the chip; beyond this it scrolls content natively. */
+/** Maximum measured content width in px before the edit input stops growing
+ *  (the rendered width is this + WIDTH_OFFSET); caps a long value so it can't
+ *  grow past the chip, beyond which it scrolls content natively. */
 export declare const MAX_INPUT_WIDTH = 280;
-/** Extra pixels added to measured width to prevent text clipping */
-export declare const WIDTH_OFFSET = 1;
+/** Extra pixels added to measured width: caret room so the edit input sits at
+ *  the entered text width + 4px (prevents clipping and the caret hugging the edge). */
+export declare const WIDTH_OFFSET = 4;
 /** Approximate width of a single character in px (text-sm fallback) */
 export declare const CHAR_WIDTH_PX = 8;

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

@@ -1,5 +1,5 @@
 const MIN_INPUT_WIDTH = 4;
 const MAX_INPUT_WIDTH = 280;
-const WIDTH_OFFSET = 1;
+const WIDTH_OFFSET = 4;
 const CHAR_WIDTH_PX = 8;
 export { CHAR_WIDTH_PX, MAX_INPUT_WIDTH, MIN_INPUT_WIDTH, WIDTH_OFFSET };

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

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { flushSync } from "react-dom";
 import { SEGMENT_VARIANT } from "../../../FilterInputField/FilterInputChip/index.js";
 import { OPERATOR_SYMBOLS, chipIdToConditionIndex, getFieldOperators, getOperatorFromLabel, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible } from "../../../lib/index.js";
 const useOperatorFlow = ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, setSelectedOperator, setMenuState, setBuildingMultiValue, setInputText, buildingSide, buildingBase, setBuildingBase, setBuildingSide })=>{
@@ -49,6 +50,14 @@ const useOperatorFlow = ({ editing, selectedField, selectedOperator, insertIndex
                 setSegmentFilterText('');
             }
         }
+        if (!editingChipId) {
+            flushSync(()=>{
+                setSelectedOperator(operator);
+                setInputText('');
+            });
+            setMenuState('value');
+            return;
+        }
         setSelectedOperator(operator);
         setInputText('');
         setMenuState('value');

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.77.3",
-  "generatedAt": "2026-07-22T07:11:53.777Z",
+  "version": "0.77.4",
+  "generatedAt": "2026-07-22T15:52:25.806Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

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