@wallarm-org/design-system 0.67.3 → 0.68.1-rc-feature-AS-1171.1

package/dist/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -1,3 +1,10 @@
 import type { FC } from 'react';
-import type { AnimatedBackgroundProps } from './module';
+import { type BlurBackgroundProps } from './blur';
+import { type PixelBackgroundProps } from './pixel';
+type AnimatedBackgroundProps = ({
+    variant?: 'pixel';
+} & PixelBackgroundProps) | ({
+    variant?: 'blur';
+} & BlurBackgroundProps);
+export type { AnimatedBackgroundProps };
 export declare const AnimatedBackground: FC<AnimatedBackgroundProps>;

package/dist/components/AnimatedBackground/AnimatedBackground.js

@@ -1,121 +1,12 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { cn } from "../../utils/cn.js";
-import { createSweepEngine, resolveOptions, useGame } from "./module/index.js";
-const AnimatedBackground = (props)=>{
-    const { ref, texture, paused, game = false, excludeCardSize, className, children, ...rest } = props;
-    const canvasRef = useRef(null);
-    const engineRef = useRef(null);
-    const reducedMotionRef = useRef(null);
-    const options = resolveOptions(props);
-    const optionsRef = useRef(options);
-    const pausedRef = useRef(paused);
-    useEffect(()=>{
-        optionsRef.current = options;
-        pausedRef.current = paused;
-    });
-    const isHalftone = (texture ?? 'halftone') === 'halftone';
-    const { gameActive, onPointerDown, hudElement, onEngineCreated, onEngineDestroyed } = useGame({
-        game,
-        isHalftone,
-        excludeCardSize,
-        canvasRef
-    });
-    useEffect(()=>{
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const engine = createSweepEngine(canvas, optionsRef.current);
-        engineRef.current = engine;
-        onEngineCreated(engine);
-        const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
-        reducedMotionRef.current = reduced;
-        const apply = ()=>{
-            if (reduced.matches || pausedRef.current) {
-                engine.stop();
-                engine.renderStatic();
-            } else engine.start();
-        };
-        apply();
-        reduced.addEventListener('change', apply);
-        let frame = 0;
-        const ro = new ResizeObserver(()=>{
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(()=>engine.resize());
-        });
-        ro.observe(canvas);
-        const themeObserver = new MutationObserver(()=>engine.setOptions({}));
-        themeObserver.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: [
-                'data-theme',
-                'class'
-            ]
-        });
-        return ()=>{
-            reduced.removeEventListener('change', apply);
-            reducedMotionRef.current = null;
-            ro.disconnect();
-            themeObserver.disconnect();
-            cancelAnimationFrame(frame);
-            engine.stop();
-            engineRef.current = null;
-            onEngineDestroyed();
-        };
-    }, [
-        onEngineCreated,
-        onEngineDestroyed
-    ]);
-    const syncKey = `${JSON.stringify(options)}|${paused}`;
-    useEffect(()=>{
-        const engine = engineRef.current;
-        if (!engine) return;
-        engine.setOptions(optionsRef.current);
-        const reduced = reducedMotionRef.current;
-        if (reduced?.matches || pausedRef.current) {
-            engine.stop();
-            engine.renderStatic();
-        } else engine.start();
-    }, [
-        syncKey
-    ]);
-    if (null == children) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("canvas", {
-                "data-slot": "animated-background",
-                ...rest,
-                ref: (node)=>{
-                    canvasRef.current = node;
-                    if ('function' == typeof ref) ref(node);
-                    else if (ref) ref.current = node;
-                },
-                "aria-hidden": "true",
-                className: cn('h-full w-full pointer-events-none', gameActive && 'pointer-events-auto', className),
-                onPointerDown: onPointerDown
-            }),
-            hudElement
-        ]
-    });
-    return /*#__PURE__*/ jsxs("div", {
-        "data-slot": "animated-background",
-        ...rest,
-        ref: ref,
-        className: cn('relative h-full w-full', className),
-        children: [
-            /*#__PURE__*/ jsx("canvas", {
-                ref: canvasRef,
-                "aria-hidden": "true",
-                className: cn('absolute inset-0 h-full w-full pointer-events-none', gameActive && 'pointer-events-auto'),
-                onPointerDown: onPointerDown
-            }),
-            hudElement,
-            /*#__PURE__*/ jsx("div", {
-                className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "pointer-events-auto",
-                    children: children
-                })
-            })
-        ]
+import { jsx } from "react/jsx-runtime";
+import { BlurBackground } from "./blur/index.js";
+import { PixelBackground } from "./pixel/index.js";
+const AnimatedBackground = ({ variant = 'pixel', ...rest })=>{
+    if ('blur' === variant) return /*#__PURE__*/ jsx(BlurBackground, {
+        ...rest
+    });
+    return /*#__PURE__*/ jsx(PixelBackground, {
+        ...rest
     });
 };
 AnimatedBackground.displayName = 'AnimatedBackground';

package/dist/components/AnimatedBackground/blur/BlurBackground.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface BlurBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const BlurBackground: FC<BlurBackgroundProps>;

package/dist/components/AnimatedBackground/blur/BlurBackground.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+const BLOBS = [
+    {
+        name: 'b1-lavender-top',
+        style: {
+            width: '66%',
+            height: '52%',
+            left: '-8%',
+            top: '-12%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #cdccda 0%, rgba(205,204,218,0) 68%)',
+        anim: 'lg-f1',
+        base: 37
+    },
+    {
+        name: 'b2-cream-right',
+        style: {
+            width: '56%',
+            height: '78%',
+            right: '-13%',
+            top: '6%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #f6dba6 0%, rgba(246,219,166,0) 66%)',
+        anim: 'lg-f2',
+        base: 29
+    },
+    {
+        name: 'b3-peach-halo',
+        style: {
+            width: '78%',
+            height: '64%',
+            left: '10%',
+            bottom: '-20%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #ffab70 0%, rgba(255,171,112,0) 68%)',
+        anim: 'lg-f4',
+        base: 31
+    },
+    {
+        name: 'b4-orange-core',
+        style: {
+            width: '60%',
+            height: '48%',
+            left: '22%',
+            bottom: '-10%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #ffb07e 0%, #ffc8a2 33%, rgba(255,200,162,0) 70%)',
+        anim: 'lg-f3',
+        base: 23
+    },
+    {
+        name: 'b5-cream-lower',
+        style: {
+            width: '60%',
+            height: '56%',
+            right: '-11%',
+            bottom: '0%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #f9e2b4 0%, rgba(249,226,180,0) 66%)',
+        anim: 'lg-f5',
+        base: 41
+    },
+    {
+        name: 'b6-offwhite-center',
+        style: {
+            width: '76%',
+            height: '62%',
+            left: '13%',
+            top: '24%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #f3eae0 0%, rgba(243,234,224,0) 70%)',
+        anim: 'lg-f6',
+        base: 43
+    }
+];
+const BLUR = 90;
+const SPEED = 2;
+const BlurBackground = ({ ref, className, style, children, ...rest })=>{
+    const meshContent = /*#__PURE__*/ jsx("div", {
+        className: "lg-mesh",
+        style: {
+            '--lg-blur': BLUR
+        },
+        children: BLOBS.map((b)=>/*#__PURE__*/ jsx("div", {
+                className: "lg-blob",
+                style: {
+                    ...b.style,
+                    background: b.background,
+                    animationName: b.anim,
+                    animationDuration: `${b.base / SPEED}s`,
+                    animationTimingFunction: 'ease-in-out',
+                    animationIterationCount: 'infinite'
+                }
+            }, b.name))
+    });
+    if (null == children) return /*#__PURE__*/ jsx("div", {
+        "data-slot": "blur-background",
+        ...rest,
+        ref: ref,
+        className: cn('lg-frame', className),
+        style: style,
+        "aria-hidden": "true",
+        children: meshContent
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "blur-background",
+        ...rest,
+        ref: ref,
+        className: cn('lg-frame relative', className),
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                className: "absolute inset-0 pointer-events-none",
+                children: meshContent
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "pointer-events-auto",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+BlurBackground.displayName = 'BlurBackground';
+export { BlurBackground };

package/dist/components/AnimatedBackground/blur/index.d.ts

@@ -0,0 +1 @@
+export { BlurBackground, type BlurBackgroundProps } from './BlurBackground';

package/dist/components/AnimatedBackground/blur/index.js

@@ -0,0 +1,2 @@
+import { BlurBackground } from "./BlurBackground.js";
+export { BlurBackground };

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

@@ -1,2 +1,3 @@
-export { AnimatedBackground } from './AnimatedBackground';
-export type { AnimatedBackgroundProps } from './module';
+export { AnimatedBackground, type AnimatedBackgroundProps } from './AnimatedBackground';
+export { BlurBackground, type BlurBackgroundProps } from './blur/BlurBackground';
+export { PixelBackground, type PixelBackgroundProps } from './pixel/PixelBackground';

package/dist/components/AnimatedBackground/index.js

@@ -1,2 +1,4 @@
 import { AnimatedBackground } from "./AnimatedBackground.js";
-export { AnimatedBackground };
+import { BlurBackground } from "./blur/BlurBackground.js";
+import { PixelBackground } from "./pixel/PixelBackground.js";
+export { AnimatedBackground, BlurBackground, PixelBackground };

package/dist/components/AnimatedBackground/{GameHud.js → pixel/GameHud.js}

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../../utils/cn.js";
 const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, gateTarget, onTryAgain, soundOn })=>{
     const showCounter = caught > 0;
     return /*#__PURE__*/ jsxs(Fragment, {

package/dist/components/AnimatedBackground/pixel/PixelBackground.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface PixelBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    game?: boolean;
+    excludeCardSize?: {
+        width: number;
+        height: number;
+    };
+}
+export declare const PixelBackground: FC<PixelBackgroundProps>;

package/dist/components/AnimatedBackground/pixel/PixelBackground.js

@@ -0,0 +1,102 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../../utils/cn.js";
+import { createSweepEngine, resolveOptions, useGame } from "./module/index.js";
+const ENGINE_OPTIONS = resolveOptions();
+const PixelBackground = (props)=>{
+    const { ref, game = false, excludeCardSize, className, children, ...rest } = props;
+    const canvasRef = useRef(null);
+    const engineRef = useRef(null);
+    const reducedMotionRef = useRef(null);
+    const { gameActive, onPointerDown, hudElement, onEngineCreated, onEngineDestroyed } = useGame({
+        game,
+        isHalftone: true,
+        excludeCardSize,
+        canvasRef
+    });
+    useEffect(()=>{
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const engine = createSweepEngine(canvas, ENGINE_OPTIONS);
+        engineRef.current = engine;
+        onEngineCreated(engine);
+        const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+        reducedMotionRef.current = reduced;
+        const apply = ()=>{
+            if (reduced.matches) {
+                engine.stop();
+                engine.renderStatic();
+            } else engine.start();
+        };
+        apply();
+        reduced.addEventListener('change', apply);
+        let frame = 0;
+        const ro = new ResizeObserver(()=>{
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(()=>engine.resize());
+        });
+        ro.observe(canvas);
+        const themeObserver = new MutationObserver(()=>engine.setOptions({}));
+        themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [
+                'data-theme',
+                'class'
+            ]
+        });
+        return ()=>{
+            reduced.removeEventListener('change', apply);
+            reducedMotionRef.current = null;
+            ro.disconnect();
+            themeObserver.disconnect();
+            cancelAnimationFrame(frame);
+            engine.stop();
+            engineRef.current = null;
+            onEngineDestroyed();
+        };
+    }, [
+        onEngineCreated,
+        onEngineDestroyed
+    ]);
+    if (null == children) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("canvas", {
+                "data-slot": "pixel-background",
+                ...rest,
+                ref: (node)=>{
+                    canvasRef.current = node;
+                    if ('function' == typeof ref) ref(node);
+                    else if (ref) ref.current = node;
+                },
+                "aria-hidden": "true",
+                className: cn('h-full w-full pointer-events-none', gameActive && 'pointer-events-auto', className),
+                onPointerDown: onPointerDown
+            }),
+            hudElement
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "pixel-background",
+        ...rest,
+        ref: ref,
+        className: cn('relative h-full w-full', className),
+        children: [
+            /*#__PURE__*/ jsx("canvas", {
+                ref: canvasRef,
+                "aria-hidden": "true",
+                className: cn('absolute inset-0 h-full w-full pointer-events-none', gameActive && 'pointer-events-auto'),
+                onPointerDown: onPointerDown
+            }),
+            hudElement,
+            /*#__PURE__*/ jsx("div", {
+                className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "pointer-events-auto",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+PixelBackground.displayName = 'PixelBackground';
+export { PixelBackground };

package/dist/components/AnimatedBackground/pixel/index.d.ts

@@ -0,0 +1 @@
+export { PixelBackground, type PixelBackgroundProps } from './PixelBackground';

package/dist/components/AnimatedBackground/pixel/index.js

@@ -0,0 +1,2 @@
+import { PixelBackground } from "./PixelBackground.js";
+export { PixelBackground };

package/dist/components/AnimatedBackground/{module → pixel/module}/game-logic.js

@@ -59,7 +59,7 @@ function createGameLogic(host) {
     let roundSpawned = 0;
     let roundDone = false;
     let lastSpawn = -1 / 0;
-    let soundOn = false;
+    let soundOn = true;
     let plugins = {};
     let statsCb = null;
     let exclusionBox = null;

package/dist/components/AnimatedBackground/{module → pixel/module}/index.d.ts

@@ -1,5 +1,5 @@
 export { createSweepEngine, type SweepEngine } from './engine';
 export { resolveOptions } from './lib';
-export type { AnimatedBackgroundProps, EngineOptions, GameStats, Texture } from './types';
+export type { EngineOptions, GameStats } from './types';
 export { useGame } from './useGame';
 export { useGameKeyboard } from './useGameKeyboard';

package/dist/components/AnimatedBackground/pixel/module/lib.d.ts

@@ -0,0 +1,2 @@
+import type { EngineOptions } from './types';
+export declare const resolveOptions: () => EngineOptions;

package/dist/components/AnimatedBackground/pixel/module/lib.js

@@ -0,0 +1,16 @@
+const resolveOptions = ()=>({
+        texture: 'halftone',
+        spacing: 16,
+        sweepPeriod: 12.5,
+        bloomRadius: 80,
+        anomalyInterval: 1.4,
+        intensity: 0.9,
+        bloomAlpha: 0.2,
+        maxDotSize: 20,
+        tilt: 16,
+        dotColorVar: '--animated-bg-dot',
+        accentColorVar: '--animated-bg-accent-dot',
+        baseColorVar: '--color-component-app-shell-bg',
+        caughtColorVar: '--animated-bg-caught-dot'
+    });
+export { resolveOptions };

package/dist/components/AnimatedBackground/pixel/module/types.d.ts

@@ -0,0 +1,38 @@
+export type Texture = 'clean' | 'halftone';
+export interface EngineOptions {
+    texture: Texture;
+    /** Grid cell size in px. */
+    spacing: number;
+    /** Seconds for one L→R sweep pass. */
+    sweepPeriod: number;
+    /** How far from the scan line (px) dots react. */
+    bloomRadius: number;
+    /** Minimum seconds between accent events. */
+    anomalyInterval: number;
+    /** Global opacity multiplier (0–1). */
+    intensity: number;
+    /** Peak alpha of bloomed dots before `intensity`. */
+    bloomAlpha: number;
+    /** Halftone only: cap on a bloomed pixel's edge length (px). */
+    maxDotSize: number;
+    /** Sweep-line tilt in degrees (0 = vertical). */
+    tilt: number;
+    /** CSS custom-property names resolved at runtime. */
+    dotColorVar: string;
+    accentColorVar: string;
+    baseColorVar: string;
+    /** CSS custom-property name for the "caught" (neutralised) color. */
+    caughtColorVar: string;
+}
+export interface GameStats {
+    /** Lifetime catches — drives the arming gate (≥ 5); reset only by exitGame. */
+    kills: number;
+    /** Threats stopped THIS round (HIT numerator). */
+    stopped: number;
+    /** Threats that timed out unshot THIS round. */
+    escaped: number;
+    /** Attacks spawned this round (caps at ROUND_ATTACKS). */
+    spawned: number;
+    /** Round complete — full wave spawned AND field cleared. */
+    done: boolean;
+}

package/dist/components/Calendar/CalendarInputHeader.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { DatePicker } from "@ark-ui/react";
+import { CalendarDateTime } from "@internationalized/date";
 import { cn } from "../../utils/cn.js";
 import { DateInput } from "../DateInput/index.js";
 import { useCalendarContext } from "./CalendarContext.js";
@@ -12,7 +13,16 @@ const toArkDateValue = (date)=>{
     if (!date) return;
     return date;
 };
-const SingleDateInputInner = ({ api, readonly })=>{
+const withTime = (value, time)=>{
+    if (!value) return null;
+    if ('hour' in value) return value;
+    return new CalendarDateTime(value.year, value.month, value.day, time.hour, time.minute);
+};
+const SingleDateInputInner = ({ api, readonly, showTime })=>{
+    const [time, setTime] = useState({
+        hour: 0,
+        minute: 0
+    });
     const handleChange = useCallback((newValue)=>{
         const arkValue = toArkDateValue(newValue);
         if (arkValue) api.setValue([
@@ -22,11 +32,26 @@ const SingleDateInputInner = ({ api, readonly })=>{
     }, [
         api
     ]);
+    const handleDateTimeChange = useCallback((newValue)=>{
+        if (newValue && 'hour' in newValue) setTime({
+            hour: newValue.hour,
+            minute: newValue.minute
+        });
+        handleChange(newValue);
+    }, [
+        handleChange
+    ]);
     const inputValue = toReactAriaDateValue(api.value[0]);
     return /*#__PURE__*/ jsx("div", {
         className: "flex flex-1",
         onKeyDown: (e)=>e.stopPropagation(),
-        children: /*#__PURE__*/ jsx(DateInput, {
+        children: showTime ? /*#__PURE__*/ jsx(DateInput, {
+            value: withTime(inputValue, time),
+            onChange: handleDateTimeChange,
+            readOnly: readonly,
+            granularity: "minute",
+            showTimeDropdown: true
+        }) : /*#__PURE__*/ jsx(DateInput, {
             value: inputValue,
             onChange: handleChange,
             readOnly: readonly,
@@ -96,7 +121,7 @@ const RangeDateInputInner = ({ api, readonly })=>{
     });
 };
 const CalendarInputHeader = ({ className })=>{
-    const { isRange, readonly } = useCalendarContext();
+    const { isRange, readonly, showTime } = useCalendarContext();
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-1 items-center', 'pt-20 pb-4 px-20', className),
         children: /*#__PURE__*/ jsx(DatePicker.Context, {
@@ -105,7 +130,8 @@ const CalendarInputHeader = ({ className })=>{
                     readonly: readonly
                 }) : /*#__PURE__*/ jsx(SingleDateInputInner, {
                     api: api,
-                    readonly: readonly
+                    readonly: readonly,
+                    showTime: showTime
                 })
         })
     });

package/dist/components/FilterInput/FilterInputMenu/FilterInputMenu.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
-import { findValueLabelInFields, getCurrentValueTokenText, getFieldValues, getValueFilterText, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
+import { canBorrowCrossFieldLabel, findValueLabelInFields, getCurrentValueTokenText, getFieldValues, getValueFilterText, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
 import { FilterInputDateValueMenu } from "./FilterInputDateValueMenu/index.js";
 import { FilterInputFieldMenu } from "./FilterInputFieldMenu/index.js";
 import { FilterInputOperatorMenu } from "./FilterInputOperatorMenu.js";
@@ -42,6 +42,7 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
             const key = String(v);
             const i = indexByKey.get(key);
             if (null != i && result[i].label !== key) continue;
+            if (!canBorrowCrossFieldLabel(selectedField, v)) continue;
             const label = findValueLabelInFields(v, fields);
             if (void 0 !== label) if (null != i) result[i] = {
                 ...result[i],
@@ -61,7 +62,8 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
         selectedFieldValues,
         editingMultiValues,
         editingSingleValue,
-        fields
+        fields,
+        selectedField
     ]);
     const valueFilterText = getValueFilterText(currentTokenText, selectedOperator, menuValues);
     const showOperatorMenu = !!selectedField;

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

@@ -1,5 +1,5 @@
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { NO_VALUE_PLACEHOLDER, findOptionByValue, findValueLabelInFields, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, isNoValueOperator } from "../../lib/index.js";
+import { NO_VALUE_PLACEHOLDER, canBorrowCrossFieldLabel, findOptionByValue, findValueLabelInFields, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, isNoValueOperator } from "../../lib/index.js";
 const INVALID_DATE = 'Invalid Date';
 const DATE_RANGE_SEPARATOR = ' – ';
 const MULTI_VALUE_SEPARATOR = ', ';
@@ -25,6 +25,7 @@ const makeEmptyChip = (i, error)=>({
 const resolveValueLabel = (value, field, fields)=>{
     const own = findOptionByValue(field, value)?.label;
     if (void 0 !== own) return own;
+    if (!canBorrowCrossFieldLabel(field, value)) return;
     return findValueLabelInFields(value, fields);
 };
 const resolveDisplayValue = (condition, field, fields)=>{

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

@@ -15,4 +15,4 @@ export { type FilterParseError, isFilterParseError, parseExpression } from './pa
 export { SEGMENT_TO_MENU } from './segmentMenu';
 export { serializeExpression } from './serializeExpression';
 export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';
-export { findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField, } from './validation';
+export { canBorrowCrossFieldLabel, findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField, } from './validation';

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

@@ -14,5 +14,5 @@ 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";
-import { findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField } from "./validation.js";
-export { CONNECTOR_ID_PATTERN, COUNTRY_OPTIONS, DATE_PRESETS, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, 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, buildAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findMatchingFieldValue, findOptionByValue, findValueLabelInFields, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldOperators, getFieldValues, getInvalidValueIndices, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isBuildingComplete, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValidFieldValue, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression, toAnchorBounds, validateValueForField };
+import { canBorrowCrossFieldLabel, findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField } from "./validation.js";
+export { CONNECTOR_ID_PATTERN, COUNTRY_OPTIONS, DATE_PRESETS, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, 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, buildAnchoredRect, canBorrowCrossFieldLabel, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findMatchingFieldValue, findOptionByValue, findValueLabelInFields, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldOperators, getFieldValues, getInvalidValueIndices, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isBuildingComplete, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValidFieldValue, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression, toAnchorBounds, validateValueForField };