@wallarm-org/design-system 1.7.0 → 1.8.0

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

@@ -30,6 +30,8 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
                 valueSeparator: chip.valueSeparator,
                 errorValueIndices: chip.errorValueIndices,
                 disabled: chip.disabled,
+                valueMaxWidth: chip.valueMaxWidth,
+                caretMode: chip.caretMode,
                 pair: chip.pair,
                 onRemove: chip.disabled ? void 0 : ()=>onChipRemove(chip.id),
                 onSegmentClick: chip.disabled ? void 0 : (segment, anchorEl)=>onChipClick(chip.id, segment, anchorEl),

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

@@ -20,6 +20,11 @@ export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement
     building?: boolean;
     /** When true, the chip cannot be edited or removed (dimmed appearance) */
     disabled?: boolean;
+    /** Caps the applied value segment at this width (px), truncating with an
+     *  ellipsis; lifts the chip's default max-width so it grows to fit (AS-1064). */
+    valueMaxWidth?: number;
+    /** `'end'` places the caret at the end on value inline-edit; omit to select all (AS-1064). */
+    caretMode?: 'end';
     /** Second paired triplet (two-step fields). The paired attribute is fixed. */
     pair?: FilterInputChipData['pair'];
     onRemove?: () => void;

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

@@ -9,7 +9,7 @@ import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
 import { PairSeparator } from "./PairSeparator.js";
 import { Segment } from "./Segment.js";
 import { SEGMENT_VARIANT } from "./segmentVariant.js";
-const FilterInputChip = ({ ref, chipId, attribute, attributeDescription, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, disabled = false, pair, onRemove, onSegmentClick, onPairSegmentClick, className, ...props })=>{
+const FilterInputChip = ({ ref, chipId, attribute, attributeDescription, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, disabled = false, valueMaxWidth, caretMode, pair, onRemove, onSegmentClick, onPairSegmentClick, className, style, ...props })=>{
     const interactive = !disabled;
     const internalRef = useRef(null);
     const editing = useEditingContext();
@@ -75,6 +75,10 @@ const FilterInputChip = ({ ref, chipId, attribute, attributeDescription, operato
             disabled,
             building
         }), pair ? 'max-w-[380px]' : 'max-w-[320px]', className),
+        style: valueMaxWidth && !pair ? {
+            maxWidth: 'none',
+            ...style
+        } : style,
         "data-slot": "filter-input-condition-chip",
         ...building && {
             'data-building': ''
@@ -104,10 +108,17 @@ const FilterInputChip = ({ ref, chipId, attribute, attributeDescription, operato
             (value || baseActiveSegment === SEGMENT_VARIANT.value || !pair && effectiveError === SEGMENT_VARIANT.value) && /*#__PURE__*/ jsx(Segment, {
                 variant: SEGMENT_VARIANT.value,
                 className: value || pair ? pair ? 'max-w-[90px] shrink-0' : 'min-w-0' : emptyValueHitTarget,
+                ...valueMaxWidth && value && !pair && {
+                    style: {
+                        maxWidth: valueMaxWidth
+                    }
+                },
                 error: baseActiveSegment !== SEGMENT_VARIANT.value && (true === effectiveError || effectiveError === SEGMENT_VARIANT.value),
                 valueParts: valueParts,
                 valueSeparator: valueSeparator,
                 errorValueIndices: errorValueIndices,
+                caretMode: caretMode,
+                valueMaxWidth: valueMaxWidth,
                 onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.value, e) : void 0,
                 onMouseDown: interactive && building ? handleSegmentMouseDown : void 0,
                 ...segmentEditProps(SEGMENT_VARIANT.value),

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

@@ -18,5 +18,11 @@ export type SegmentProps = HTMLAttributes<HTMLDivElement> & {
     valueSeparator?: string;
     /** Indices of invalid values in valueParts */
     errorValueIndices?: number[];
+    /** `'end'` places the caret at the end on edit; omit for default select-all (AS-1064). */
+    caretMode?: 'end';
+    /** Caps the edit input's width (px) to match the applied value cap, so the
+     *  segment keeps the same width entering/leaving edit instead of snapping to
+     *  the default MAX_INPUT_WIDTH. Value variant only (AS-1064). */
+    valueMaxWidth?: number;
 };
 export declare const Segment: FC<SegmentProps>;

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

@@ -2,12 +2,13 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
 import { FilterInputContext } from "../../FilterInputContext/FilterInputContext.js";
+import { applyEditCaret } from "./applyEditCaret.js";
 import { editingValueMinWidth, segmentContainer, segmentTextVariants } from "./classes.js";
 import { CHAR_WIDTH_PX } from "./constants.js";
 import { MultiValueSegment } from "./MultiValueSegment.js";
 import { useSizerWidth } from "./model/useSizerWidth.js";
 import { SEGMENT_VARIANT } from "./segmentVariant.js";
-const Segment = ({ ref, variant, children, className, error, editing, editText, onEditChange, onEditKeyDown, onEditBlur, valueParts, valueSeparator = ', ', errorValueIndices, ...props })=>{
+const Segment = ({ ref, variant, children, className, error, editing, editText, onEditChange, onEditKeyDown, onEditBlur, valueParts, valueSeparator = ', ', errorValueIndices, caretMode, valueMaxWidth, ...props })=>{
     const textRef = useRef(null);
     const inputRef = useRef(null);
     const sizerRef = useRef(null);
@@ -28,7 +29,7 @@ const Segment = ({ ref, variant, children, className, error, editing, editText,
         const outerFrame = requestAnimationFrame(()=>{
             innerFrame = requestAnimationFrame(()=>{
                 inputRef.current?.focus();
-                inputRef.current?.select();
+                applyEditCaret(inputRef.current);
             });
         });
         return ()=>{
@@ -40,7 +41,10 @@ const Segment = ({ ref, variant, children, className, error, editing, editText,
     ]);
     const inputWidth = useSizerWidth({
         sizerRef,
-        text: editText ?? ''
+        text: editText ?? '',
+        ...variant === SEGMENT_VARIANT.value && valueMaxWidth && {
+            maxWidth: valueMaxWidth
+        }
     });
     const setInputRef = useCallback((node)=>{
         inputRef.current = node;
@@ -76,6 +80,9 @@ const Segment = ({ ref, variant, children, className, error, editing, editText,
                     onKeyDown: onEditKeyDown,
                     onBlur: onEditBlur,
                     "aria-label": `Filter ${variant}`,
+                    ...'end' === caretMode && {
+                        'data-caret-mode': 'end'
+                    },
                     className: cn(segmentTextVariants({
                         variant,
                         error

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

@@ -0,0 +1 @@
+export declare const applyEditCaret: (input: HTMLInputElement | null) => void;

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

@@ -0,0 +1,10 @@
+const applyEditCaret = (input)=>{
+    if (!input) return;
+    if ('end' === input.dataset.caretMode) {
+        const end = input.value.length;
+        input.setSelectionRange(end, end);
+        return;
+    }
+    input.select();
+};
+export { applyEditCaret };

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

@@ -1,4 +1,5 @@
 export { type ConnectorVariant, FilterInputConnectorChip, type FilterInputConnectorChipProps, } from '../FilterInputConnectorChip';
+export { applyEditCaret } from './applyEditCaret';
 export { type EditingContextValue, EditingProvider, useEditingContext, } from './context/EditingContext';
 export { type ChipSegment, FilterInputChip, type FilterInputChipProps, type PairSegment, } from './FilterInputChip';
 export { FilterInputRemoveButton } from './FilterInputRemoveButton';

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

@@ -1,4 +1,5 @@
 export { FilterInputConnectorChip } from "../FilterInputConnectorChip/index.js";
+export { applyEditCaret } from "./applyEditCaret.js";
 export { EditingProvider, useEditingContext } from "./context/EditingContext.js";
 export { FilterInputChip } from "./FilterInputChip.js";
 export { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";

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

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
+import { isMultiSelectOperator } from "../../lib/index.js";
 import { deriveAutocompleteValues } from "./lib/index.js";
 import { useAutocompleteState } from "./useAutocompleteState.js";
 import { useBlurCommit } from "./useBlurCommit.js";
@@ -218,6 +219,8 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         buildingBase,
         editingSide: editing.editingSide
     });
+    const isMultiValueValueEdit = null != editing.editingChipId && editing.editingSegment === SEGMENT_VARIANT.value && null != selectedOperator && isMultiSelectOperator(selectedOperator);
+    const liveSegmentFilterText = isMultiValueValueEdit && null != buildingMultiValue && '' === editing.segmentMenuFilterText ? buildingMultiValue : editing.segmentFilterText;
     return {
         inputText,
         menuState,
@@ -260,7 +263,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         editingChipId: editing.editingChipId,
         editingSegment: editing.editingSegment,
         editingSide: editing.editingSide,
-        segmentFilterText: editing.segmentFilterText,
+        segmentFilterText: liveSegmentFilterText,
         segmentMenuFilterText: editing.segmentMenuFilterText,
         handleSegmentFilterChange,
         cancelSegmentEdit,

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
+import { SEGMENT_VARIANT, applyEditCaret } from "../../FilterInputField/FilterInputChip/index.js";
 import { isMenuRelated, nextBuildingMenu } from "../../lib/index.js";
 const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuAnchor, resetState })=>{
     const handleFocus = useCallback((e)=>{
@@ -12,12 +12,19 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
     const handleBlur = useCallback((e)=>{
         if (handlingBlurRef.current) return;
         const related = e.relatedTarget;
-        if (containerRef.current?.contains(related)) return;
         if (isMenuRelated(related)) return;
+        if (null != related && (related === segmentAttributeInputRef.current || related === segmentOperatorInputRef.current || related === segmentValueInputRef.current)) return;
         handlingBlurRef.current = true;
         try {
+            const focusStaysInside = !!containerRef.current?.contains(related);
+            if ((null != editingSegment || !focusStaysInside) && blurCommitRef.current?.()) {
+                setIsFocused(false);
+                related?.focus();
+                return;
+            }
+            if (focusStaysInside) return;
             setIsFocused(false);
-            const committed = blurCommitRef.current?.() || commitBuildingOnBlur();
+            const committed = commitBuildingOnBlur();
             if (!committed) if (hasIncompleteBuilding()) setMenuState('closed');
             else resetState();
             related?.focus();
@@ -33,7 +40,11 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         resetState,
         setIsFocused,
         setMenuState,
-        inputRef
+        inputRef,
+        editingSegment,
+        segmentAttributeInputRef,
+        segmentOperatorInputRef,
+        segmentValueInputRef
     ]);
     const prevFocusedRef = useRef(false);
     useEffect(()=>{
@@ -87,7 +98,7 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
                 if (!dest) return;
                 if (document.activeElement === dest) return;
                 dest.focus();
-                if (editingSegment) dest.select();
+                if (editingSegment) applyEditCaret(dest);
             });
         });
         return ()=>{

package/dist/components/FilterInput/hooks/useFilterInputExpression/buildChips.js

@@ -39,6 +39,12 @@ const buildBaseChip = (i, condition, field)=>({
         ...field?.description && {
             attributeDescription: field.description
         },
+        ...field?.valueMaxWidth && {
+            valueMaxWidth: field.valueMaxWidth
+        },
+        ...field?.caretMode && {
+            caretMode: field.caretMode
+        },
         operator: condition.operator ? getOperatorLabel(condition.operator, field?.type || DEFAULT_FIELD_TYPE) : void 0,
         ...condition.disabled && {
             disabled: true

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

@@ -38,6 +38,10 @@ export interface FilterInputChipData {
     errorValueIndices?: number[];
     /** When true, the chip cannot be edited or removed */
     disabled?: boolean;
+    /** Applied value-segment width cap in px (see FieldMetadata.valueMaxWidth). */
+    valueMaxWidth?: number;
+    /** Caret placement on value inline-edit (see FieldMetadata.caretMode). */
+    caretMode?: 'end';
     /** Second paired triplet (display) for two-step fields. */
     pair?: {
         attribute: string;
@@ -199,6 +203,18 @@ export interface FieldMetadata {
      * set it while an async options fetch is in flight.
      */
     loadingOptions?: boolean;
+    /**
+     * Caps the applied value segment at this width in px: a longer value truncates
+     * with a trailing ellipsis while the full value is preserved for matching. When
+     * set, the chip's default max-width is lifted so it grows to fit the wider value.
+     * Omit to keep the chip's default cap. (AS-1064: long parameter-path expressions.)
+     */
+    valueMaxWidth?: number;
+    /**
+     * `'end'` places the caret at the end of the value on inline-edit (natural for
+     * long values); omit to select the whole value so typing replaces it. (AS-1064)
+     */
+    caretMode?: 'end';
 }
 /**
  * A labeled group of filter fields for the field-selection menu, referenced by