@wallarm-org/design-system 0.27.1-rc-feature-WDS-96-update-data-input-component.2 → 0.27.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DateInput/DateInput.js +2 -4
- package/dist/components/DateRangeInput/DateRangeContext/DateRangeProvider.js +2 -5
- package/dist/components/DateRangeInput/DateRangeGroup.js +1 -1
- package/dist/components/DateRangeInput/DateRangeInputInternal.js +15 -31
- package/dist/components/DateRangeInput/DateRangeSegmentGroup.js +11 -3
- package/dist/components/FilterInput/FilterInput.d.ts +14 -0
- package/dist/components/FilterInput/FilterInput.js +5 -1
- package/dist/components/FilterInput/index.d.ts +1 -1
- package/dist/components/FilterInput/index.js +2 -2
- package/dist/components/FilterInput/lib/applyFieldValueTransforms.d.ts +11 -0
- package/dist/components/FilterInput/lib/applyFieldValueTransforms.js +43 -0
- package/dist/components/FilterInput/lib/applyKnownFieldHelpers.d.ts +21 -0
- package/dist/components/FilterInput/lib/applyKnownFieldHelpers.js +29 -0
- package/dist/components/FilterInput/lib/index.d.ts +3 -1
- package/dist/components/FilterInput/lib/index.js +4 -2
- package/dist/components/FilterInput/lib/serializeExpression.d.ts +12 -2
- package/dist/components/FilterInput/lib/serializeExpression.js +5 -2
- package/dist/components/FilterInput/lib/statusCode/createStatusCodeSerializer.d.ts +16 -0
- package/dist/components/FilterInput/lib/statusCode/createStatusCodeSerializer.js +6 -0
- package/dist/components/FilterInput/lib/statusCode/createStatusCodeSuggestions.d.ts +5 -4
- package/dist/components/FilterInput/lib/statusCode/createStatusCodeSuggestions.js +5 -6
- package/dist/components/FilterInput/lib/statusCode/createStatusCodeValidator.d.ts +1 -8
- package/dist/components/FilterInput/lib/statusCode/createStatusCodeValidator.js +3 -3
- package/dist/components/FilterInput/lib/statusCode/index.d.ts +1 -1
- package/dist/components/FilterInput/lib/statusCode/index.js +2 -1
- package/dist/components/FilterInput/lib/statusCode/utils/canonicalize.d.ts +2 -2
- package/dist/components/FilterInput/lib/statusCode/utils/canonicalize.js +3 -3
- package/dist/components/FilterInput/lib/statusCode/utils/constants.d.ts +7 -3
- package/dist/components/FilterInput/lib/statusCode/utils/constants.js +3 -3
- package/dist/components/FilterInput/lib/statusCode/utils/index.d.ts +1 -3
- package/dist/components/FilterInput/lib/statusCode/utils/index.js +2 -3
- package/dist/components/FilterInput/types.d.ts +9 -0
- package/dist/components/TemporalCore/TemporalSegment.js +2 -2
- package/dist/components/TemporalCore/index.d.ts +0 -1
- package/dist/components/TemporalCore/index.js +1 -2
- package/dist/components/TemporalCore/utils.d.ts +0 -8
- package/dist/components/TemporalCore/utils.js +1 -6
- package/dist/components/TimeInput/TimeInput.js +2 -4
- package/dist/metadata/components.json +2 -2
- package/package.json +1 -1
- package/dist/components/FilterInput/lib/statusCode/utils/maskRoots.d.ts +0 -4
- package/dist/components/FilterInput/lib/statusCode/utils/maskRoots.js +0 -3
- package/dist/components/FilterInput/lib/statusCode/utils/types.d.ts +0 -8
- package/dist/components/FilterInput/lib/statusCode/utils/types.js +0 -0
- package/dist/components/FilterInput/stories/mockStatusCodes.d.ts +0 -6
- package/dist/components/FilterInput/stories/mockStatusCodes.js +0 -20
|
@@ -5,11 +5,9 @@ import { useDateField } from "@react-aria/datepicker";
|
|
|
5
5
|
import { useLocale } from "@react-aria/i18n";
|
|
6
6
|
import { useDateFieldState } from "@react-stately/datepicker";
|
|
7
7
|
import { cn } from "../../utils/cn.js";
|
|
8
|
-
import {
|
|
8
|
+
import { useTemporalField } from "../TemporalCore/index.js";
|
|
9
9
|
import { DateInputInternal } from "./DateInputInternal.js";
|
|
10
|
-
const DateInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'day', placeholder
|
|
11
|
-
granularity
|
|
12
|
-
}), showTimeDropdown, timeStep, hourCycle, className, ...props }, forwardedRef)=>{
|
|
10
|
+
const DateInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'day', placeholder, showTimeDropdown, timeStep, hourCycle, className, ...props }, forwardedRef)=>{
|
|
13
11
|
const { locale } = useLocale();
|
|
14
12
|
const ref = useRef(null);
|
|
15
13
|
const finalRef = forwardedRef || ref;
|
|
@@ -3,12 +3,9 @@ import { forwardRef, useCallback, useRef } from "react";
|
|
|
3
3
|
import { CalendarDate } from "@internationalized/date";
|
|
4
4
|
import { useDateRangePicker } from "@react-aria/datepicker";
|
|
5
5
|
import { useDateRangePickerState } from "@react-stately/datepicker";
|
|
6
|
-
import {
|
|
6
|
+
import { useTemporalField } from "../../TemporalCore/index.js";
|
|
7
7
|
import { DateRangeContext } from "./context.js";
|
|
8
|
-
const DateRangeProvider = /*#__PURE__*/ forwardRef(({ children, value: controlledValue, defaultValue, onChange, error = false, disabled = false, readOnly = false, granularity = 'day', hourCycle, placeholder
|
|
9
|
-
granularity,
|
|
10
|
-
isRange: true
|
|
11
|
-
}), showTimeDropdown, timeStep, icon }, forwardedRef)=>{
|
|
8
|
+
const DateRangeProvider = /*#__PURE__*/ forwardRef(({ children, value: controlledValue, defaultValue, onChange, error = false, disabled = false, readOnly = false, granularity = 'day', hourCycle, placeholder, showTimeDropdown, timeStep, icon }, forwardedRef)=>{
|
|
12
9
|
const ref = useRef(null);
|
|
13
10
|
const finalRef = forwardedRef || ref;
|
|
14
11
|
const startRef = useRef(null);
|
|
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { cva } from "class-variance-authority";
|
|
3
3
|
import { cn } from "../../utils/cn.js";
|
|
4
4
|
import { useDateRangeContext } from "./DateRangeContext/index.js";
|
|
5
|
-
const dateRangeGroupVariants = cva(cn('
|
|
5
|
+
const dateRangeGroupVariants = cva(cn('group/temporal flex-1 h-full flex items-center gap-4', 'focus-within:outline-none', 'data-disabled:opacity-50 data-disabled:cursor-not-allowed'));
|
|
6
6
|
const DateRangeGroup = ({ children })=>{
|
|
7
7
|
const context = useDateRangeContext();
|
|
8
8
|
const { groupProps = {}, finalRef, disabled, error } = context ?? {};
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useCallback, useState } from "react";
|
|
3
3
|
import { cn } from "../../utils/cn.js";
|
|
4
4
|
import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
|
|
5
|
-
import { TemporalClear
|
|
5
|
+
import { TemporalClear } from "../TemporalCore/index.js";
|
|
6
6
|
import { useDateRangeContext } from "./DateRangeContext/index.js";
|
|
7
7
|
import { DateRangeGroup } from "./DateRangeGroup.js";
|
|
8
8
|
import { DateRangeSegmentGroup } from "./DateRangeSegmentGroup.js";
|
|
@@ -11,7 +11,6 @@ const DateRangeInputInternal = ({ icon: IconComponent })=>{
|
|
|
11
11
|
const context = useDateRangeContext();
|
|
12
12
|
const [startHasValue, setStartHasValue] = useState(false);
|
|
13
13
|
const [endHasValue, setEndHasValue] = useState(false);
|
|
14
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
15
14
|
const [clearKey, setClearKey] = useState(0);
|
|
16
15
|
const hasAnyValue = startHasValue || endHasValue;
|
|
17
16
|
const handleClear = useCallback(()=>{
|
|
@@ -21,17 +20,10 @@ const DateRangeInputInternal = ({ icon: IconComponent })=>{
|
|
|
21
20
|
}, [
|
|
22
21
|
context
|
|
23
22
|
]);
|
|
24
|
-
const handleFocusCapture = ()=>setIsFocused(true);
|
|
25
|
-
const handleBlurCapture = (event)=>{
|
|
26
|
-
if (!event.currentTarget.contains(event.relatedTarget)) setIsFocused(false);
|
|
27
|
-
};
|
|
28
23
|
if (!context) return null;
|
|
29
|
-
const { startFieldProps, startRef, endFieldProps, endRef, disabled
|
|
30
|
-
const showPlaceholder = Boolean(placeholder && !hasAnyValue && !isFocused);
|
|
24
|
+
const { startFieldProps, startRef, endFieldProps, endRef, disabled } = context;
|
|
31
25
|
return /*#__PURE__*/ jsx("div", {
|
|
32
26
|
className: cn('**:data-[slot=input]:first:pr-0 **:data-[slot=input]:last:pl-0 min-w-284'),
|
|
33
|
-
onFocusCapture: handleFocusCapture,
|
|
34
|
-
onBlurCapture: handleBlurCapture,
|
|
35
27
|
children: /*#__PURE__*/ jsxs(InputGroup, {
|
|
36
28
|
children: [
|
|
37
29
|
IconComponent && /*#__PURE__*/ jsx(InputGroupAddon, {
|
|
@@ -39,27 +31,19 @@ const DateRangeInputInternal = ({ icon: IconComponent })=>{
|
|
|
39
31
|
}),
|
|
40
32
|
/*#__PURE__*/ jsxs(DateRangeGroup, {
|
|
41
33
|
children: [
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
/*#__PURE__*/ jsx(DateRangeSegmentGroup, {
|
|
56
|
-
...endFieldProps,
|
|
57
|
-
ref: endRef,
|
|
58
|
-
type: "end",
|
|
59
|
-
onHasPartialValueChange: setEndHasValue
|
|
60
|
-
}, `end-${clearKey}`)
|
|
61
|
-
]
|
|
62
|
-
})
|
|
34
|
+
/*#__PURE__*/ jsx(DateRangeSegmentGroup, {
|
|
35
|
+
...startFieldProps,
|
|
36
|
+
ref: startRef,
|
|
37
|
+
type: "start",
|
|
38
|
+
onHasPartialValueChange: setStartHasValue
|
|
39
|
+
}, `start-${clearKey}`),
|
|
40
|
+
/*#__PURE__*/ jsx(DateRangeSeparator, {}),
|
|
41
|
+
/*#__PURE__*/ jsx(DateRangeSegmentGroup, {
|
|
42
|
+
...endFieldProps,
|
|
43
|
+
ref: endRef,
|
|
44
|
+
type: "end",
|
|
45
|
+
onHasPartialValueChange: setEndHasValue
|
|
46
|
+
}, `end-${clearKey}`)
|
|
63
47
|
]
|
|
64
48
|
}),
|
|
65
49
|
/*#__PURE__*/ jsx(InputGroupAddon, {
|
|
@@ -5,13 +5,14 @@ import { useDateField } from "@react-aria/datepicker";
|
|
|
5
5
|
import { useLocale } from "@react-aria/i18n";
|
|
6
6
|
import { useDateFieldState } from "@react-stately/datepicker";
|
|
7
7
|
import { cn } from "../../utils/cn.js";
|
|
8
|
-
import { TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
|
|
8
|
+
import { TemporalPlaceholder, TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
|
|
9
9
|
import { useDateRangeContext } from "./DateRangeContext/index.js";
|
|
10
10
|
const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValueChange, ...props }, ref)=>{
|
|
11
11
|
const context = useDateRangeContext();
|
|
12
|
-
const { disabled = false, error = false, readOnly = false, showTimeDropdown, timeStep = 30, hourCycle, icon } = context ?? {};
|
|
12
|
+
const { disabled = false, error = false, readOnly = false, placeholder, showTimeDropdown, timeStep = 30, hourCycle, icon } = context ?? {};
|
|
13
13
|
const { locale } = useLocale();
|
|
14
14
|
const dropdownRef = useRef(null);
|
|
15
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
15
16
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
16
17
|
const blurTimeoutRef = useRef(null);
|
|
17
18
|
const fieldState = useDateFieldState({
|
|
@@ -23,6 +24,7 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
|
|
|
23
24
|
});
|
|
24
25
|
const { fieldProps } = useDateField(props, fieldState, ref);
|
|
25
26
|
const hasPartialValue = fieldState.segments.some((seg)=>seg.isEditable && !seg.isPlaceholder);
|
|
27
|
+
const showPlaceholder = placeholder && !hasPartialValue && !isFocused;
|
|
26
28
|
useEffect(()=>{
|
|
27
29
|
onHasPartialValueChange?.(hasPartialValue);
|
|
28
30
|
}, [
|
|
@@ -32,6 +34,7 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
|
|
|
32
34
|
const hasTimeSegments = fieldState.segments.some((seg)=>'hour' === seg.type || 'minute' === seg.type);
|
|
33
35
|
const hasDateSegments = fieldState.segments.some((seg)=>'year' === seg.type || 'month' === seg.type || 'day' === seg.type);
|
|
34
36
|
const handleFocus = ()=>{
|
|
37
|
+
setIsFocused(true);
|
|
35
38
|
if (blurTimeoutRef.current) {
|
|
36
39
|
clearTimeout(blurTimeoutRef.current);
|
|
37
40
|
blurTimeoutRef.current = null;
|
|
@@ -41,6 +44,7 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
|
|
|
41
44
|
if (showTimeDropdown && hasTimeSegments && !isDropdownOpen) setIsDropdownOpen(true);
|
|
42
45
|
};
|
|
43
46
|
const handleBlur = ()=>{
|
|
47
|
+
setIsFocused(false);
|
|
44
48
|
blurTimeoutRef.current = window.setTimeout(()=>{
|
|
45
49
|
setIsDropdownOpen(false);
|
|
46
50
|
}, 200);
|
|
@@ -84,11 +88,15 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
|
|
|
84
88
|
onKeyDownCapture: handleKeyDownCapture,
|
|
85
89
|
onClick: handleClick,
|
|
86
90
|
children: [
|
|
91
|
+
showPlaceholder && /*#__PURE__*/ jsx(TemporalPlaceholder, {
|
|
92
|
+
text: placeholder,
|
|
93
|
+
className: "overflow-hidden text-ellipsis"
|
|
94
|
+
}),
|
|
87
95
|
/*#__PURE__*/ jsx(TemporalSegmentGroup, {
|
|
88
96
|
...fieldProps,
|
|
89
97
|
ref: ref,
|
|
90
98
|
"data-slot": "input",
|
|
91
|
-
className: cn('h-36'),
|
|
99
|
+
className: cn('h-36', showPlaceholder && 'opacity-0'),
|
|
92
100
|
"aria-disabled": disabled || void 0,
|
|
93
101
|
"aria-invalid": error || void 0,
|
|
94
102
|
"data-field-type": type,
|
|
@@ -1,6 +1,20 @@
|
|
|
1
1
|
import type { FC, HTMLAttributes } from 'react';
|
|
2
2
|
import type { ExprNode, FieldMetadata } from './types';
|
|
3
3
|
export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
|
|
4
|
+
/**
|
|
5
|
+
* Filter-field configurations driving the autocomplete. Most fields are
|
|
6
|
+
* passed through as-is, but a few names are **reserved** and auto-wired
|
|
7
|
+
* with design-system helpers (`acceptChar` / `normalize` / `getSuggestions`
|
|
8
|
+
* / `validate`). Current reserved names:
|
|
9
|
+
*
|
|
10
|
+
* - `status_code` — HTTP status code field (mask suggestions, format
|
|
11
|
+
* validation, digit-or-X input filter, partial-input normalization).
|
|
12
|
+
*
|
|
13
|
+
* Consumer-supplied callbacks always override the auto-wiring, so you can
|
|
14
|
+
* opt out per-field. For the same helpers on a field with a different
|
|
15
|
+
* `name`, import the factories (`createStatusCodeSuggestions`, …) and
|
|
16
|
+
* attach them manually.
|
|
17
|
+
*/
|
|
4
18
|
fields?: FieldMetadata[];
|
|
5
19
|
value?: ExprNode | null;
|
|
6
20
|
onChange?: (expression: ExprNode | null) => void;
|
|
@@ -6,7 +6,8 @@ import { FilterInputErrors, parseFilterInputErrors } from "./FilterInputErrors/i
|
|
|
6
6
|
import { FilterInputField } from "./FilterInputField/index.js";
|
|
7
7
|
import { FilterInputMenu } from "./FilterInputMenu/FilterInputMenu.js";
|
|
8
8
|
import { useFilterInputAutocomplete, useFilterInputExpression, useFilterInputSelection } from "./hooks/index.js";
|
|
9
|
-
|
|
9
|
+
import { applyKnownFieldHelpers } from "./lib/applyKnownFieldHelpers.js";
|
|
10
|
+
const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
|
|
10
11
|
const inputRef = useRef(null);
|
|
11
12
|
const containerRef = useRef(null);
|
|
12
13
|
const buildingChipRef = useRef(null);
|
|
@@ -15,6 +16,9 @@ const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filt
|
|
|
15
16
|
if (el) chipRegistryRef.current.set(id, el);
|
|
16
17
|
else chipRegistryRef.current.delete(id);
|
|
17
18
|
}, []);
|
|
19
|
+
const fields = useMemo(()=>applyKnownFieldHelpers(rawFields), [
|
|
20
|
+
rawFields
|
|
21
|
+
]);
|
|
18
22
|
const { conditions, connectors, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useFilterInputExpression({
|
|
19
23
|
fields,
|
|
20
24
|
value,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { FilterInput, type FilterInputProps } from './FilterInput';
|
|
2
2
|
export { FilterInputChip, type FilterInputChipProps } from './FilterInputField';
|
|
3
3
|
export { FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, FilterInputValueMenu, type FilterInputValueMenuProps, type ValueOption, } from './FilterInputMenu';
|
|
4
|
-
export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, isFilterParseError, parseExpression,
|
|
4
|
+
export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, isFilterParseError, parseExpression, serializeExpression, } from './lib';
|
|
5
5
|
export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FilterInput } from "./FilterInput.js";
|
|
2
2
|
import { FilterInputChip } from "./FilterInputField/index.js";
|
|
3
3
|
import { FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu } from "./FilterInputMenu/index.js";
|
|
4
|
-
import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
|
|
5
|
-
export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression };
|
|
4
|
+
import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
|
|
5
|
+
export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ExprNode, FieldMetadata } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Walk an expression tree and apply each field's `serializeValue` hook to the
|
|
4
|
+
* matching condition's value. Typical use: consumer has the UI-facing
|
|
5
|
+
* `ExprNode` (e.g. status code chip with `"2XX"`) and wants the backend
|
|
6
|
+
* payload to carry the transformed form (`"2"`).
|
|
7
|
+
*
|
|
8
|
+
* Returns the original node (by reference) when nothing changed, so
|
|
9
|
+
* downstream memoization stays stable.
|
|
10
|
+
*/
|
|
11
|
+
export declare const applyFieldValueTransforms: (expr: ExprNode | null, fields: FieldMetadata[]) => ExprNode | null;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
const transformConditionValue = (condition, fieldsByName)=>{
|
|
2
|
+
const field = fieldsByName.get(condition.field);
|
|
3
|
+
const transform = field?.serializeValue;
|
|
4
|
+
if (!transform) return condition;
|
|
5
|
+
const { value } = condition;
|
|
6
|
+
if (null == value) return condition;
|
|
7
|
+
if (Array.isArray(value)) {
|
|
8
|
+
const next = value.map((v)=>transform(v));
|
|
9
|
+
if (next.every((v, i)=>v === value[i])) return condition;
|
|
10
|
+
return {
|
|
11
|
+
...condition,
|
|
12
|
+
value: next
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
const next = transform(value);
|
|
16
|
+
if (next === value) return condition;
|
|
17
|
+
return {
|
|
18
|
+
...condition,
|
|
19
|
+
value: next
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
const transformGroup = (group, fieldsByName)=>{
|
|
23
|
+
const children = group.children.map((child)=>transformNode(child, fieldsByName));
|
|
24
|
+
if (children.every((c, i)=>c === group.children[i])) return group;
|
|
25
|
+
return {
|
|
26
|
+
...group,
|
|
27
|
+
children
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
const transformNode = (node, fieldsByName)=>{
|
|
31
|
+
if ('condition' === node.type) return transformConditionValue(node, fieldsByName);
|
|
32
|
+
return transformGroup(node, fieldsByName);
|
|
33
|
+
};
|
|
34
|
+
const applyFieldValueTransforms = (expr, fields)=>{
|
|
35
|
+
if (!expr) return expr;
|
|
36
|
+
if (!fields.some((f)=>f.serializeValue)) return expr;
|
|
37
|
+
const fieldsByName = new Map(fields.map((f)=>[
|
|
38
|
+
f.name,
|
|
39
|
+
f
|
|
40
|
+
]));
|
|
41
|
+
return transformNode(expr, fieldsByName);
|
|
42
|
+
};
|
|
43
|
+
export { applyFieldValueTransforms };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { FieldMetadata } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Decorate `fields` in place with design-system helpers for known field names.
|
|
4
|
+
* `FilterInput` calls this on the `fields` prop before rendering.
|
|
5
|
+
*
|
|
6
|
+
* Reserved names and what they auto-attach (unless the consumer already
|
|
7
|
+
* provided a value for that slot):
|
|
8
|
+
*
|
|
9
|
+
* | `name` | Attaches |
|
|
10
|
+
* | ------------- | ------------------------------------------------------------------------------------------ |
|
|
11
|
+
* | `status_code` | HTTP status code: `acceptChar`, `normalize`, `getSuggestions`, `validate`, `serializeValue` |
|
|
12
|
+
*
|
|
13
|
+
* Consumer-supplied callbacks always win over the auto-wired ones. If the
|
|
14
|
+
* backend uses a different name (e.g. `http_status_code`), the helpers are
|
|
15
|
+
* NOT applied — the consumer must either rename the field to match or wire
|
|
16
|
+
* the factories (`createStatusCode*`) manually.
|
|
17
|
+
*
|
|
18
|
+
* The returned array has **reference-stable identity** when no field matches,
|
|
19
|
+
* so downstream `useMemo` that depends on it does not invalidate unnecessarily.
|
|
20
|
+
*/
|
|
21
|
+
export declare const applyKnownFieldHelpers: (fields: FieldMetadata[]) => FieldMetadata[];
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
|
|
2
|
+
const KNOWN_FIELD_HELPERS = {
|
|
3
|
+
status_code: ()=>({
|
|
4
|
+
acceptChar: createStatusCodeInputFilter(),
|
|
5
|
+
normalize: createStatusCodeNormalizer(),
|
|
6
|
+
getSuggestions: createStatusCodeSuggestions(),
|
|
7
|
+
validate: createStatusCodeValidator(),
|
|
8
|
+
serializeValue: createStatusCodeSerializer()
|
|
9
|
+
})
|
|
10
|
+
};
|
|
11
|
+
const applyKnownFieldHelpers = (fields)=>{
|
|
12
|
+
let changed = false;
|
|
13
|
+
const out = fields.map((field)=>{
|
|
14
|
+
const factory = KNOWN_FIELD_HELPERS[field.name];
|
|
15
|
+
if (!factory) return field;
|
|
16
|
+
const helpers = factory();
|
|
17
|
+
changed = true;
|
|
18
|
+
return {
|
|
19
|
+
...field,
|
|
20
|
+
acceptChar: field.acceptChar ?? helpers.acceptChar,
|
|
21
|
+
normalize: field.normalize ?? helpers.normalize,
|
|
22
|
+
getSuggestions: field.getSuggestions ?? helpers.getSuggestions,
|
|
23
|
+
validate: field.validate ?? helpers.validate,
|
|
24
|
+
serializeValue: field.serializeValue ?? helpers.serializeValue
|
|
25
|
+
};
|
|
26
|
+
});
|
|
27
|
+
return changed ? out : fields;
|
|
28
|
+
};
|
|
29
|
+
export { applyKnownFieldHelpers };
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export type { DatePreset } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
|
|
2
2
|
export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
|
|
3
3
|
export { applyAcceptChar } from './applyAcceptChar';
|
|
4
|
+
export { applyFieldValueTransforms } from './applyFieldValueTransforms';
|
|
5
|
+
export { applyKnownFieldHelpers } from './applyKnownFieldHelpers';
|
|
4
6
|
export { chipIdToConditionIndex, findChipSplitIndex } from './conditions';
|
|
5
7
|
export { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
|
|
6
8
|
export { buildContainerAnchoredRect, isMenuRelated } from './dom';
|
|
@@ -10,4 +12,4 @@ export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
|
|
|
10
12
|
export { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator, } from './operators';
|
|
11
13
|
export { type FilterParseError, isFilterParseError, parseExpression } from './parseExpression';
|
|
12
14
|
export { serializeExpression } from './serializeExpression';
|
|
13
|
-
export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator,
|
|
15
|
+
export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } from "../FilterInputMenu/FilterInputDateValueMenu/constants.js";
|
|
2
2
|
import { applyAcceptChar } from "./applyAcceptChar.js";
|
|
3
|
+
import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
|
|
4
|
+
import { applyKnownFieldHelpers } from "./applyKnownFieldHelpers.js";
|
|
3
5
|
import { chipIdToConditionIndex, findChipSplitIndex } from "./conditions.js";
|
|
4
6
|
import { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
|
|
5
7
|
import { buildContainerAnchoredRect, isMenuRelated } from "./dom.js";
|
|
@@ -9,5 +11,5 @@ import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.j
|
|
|
9
11
|
import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator } from "./operators.js";
|
|
10
12
|
import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
|
|
11
13
|
import { serializeExpression } from "./serializeExpression.js";
|
|
12
|
-
import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
|
|
13
|
-
export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, applyAcceptChar, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
|
|
14
|
+
import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
|
|
15
|
+
export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, 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, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
|
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
import type { ExprNode } from '../types';
|
|
1
|
+
import type { ExprNode, FieldMetadata } from '../types';
|
|
2
2
|
/**
|
|
3
3
|
* Serialize an expression tree to a canonical text string.
|
|
4
4
|
* Top-level conditions are sorted alphabetically by field name.
|
|
5
|
+
*
|
|
6
|
+
* **Pass `fields` when the output targets the backend.** Per-field
|
|
7
|
+
* `serializeValue` hooks run first, so values like the status-code mask
|
|
8
|
+
* `"2XX"` become `"2"` in the emitted string. Omitting `fields` keeps the
|
|
9
|
+
* UI-facing values verbatim — useful for clipboard round-trip, debug
|
|
10
|
+
* display, or any case where the output feeds `parseExpression` back. If
|
|
11
|
+
* you forget `fields` on the path to the backend, the placeholder `X`s
|
|
12
|
+
* ride through silently — name the backend call-site helper explicitly
|
|
13
|
+
* (e.g. `const query = serializeExpression(expr, fields)`) to make the
|
|
14
|
+
* intent obvious at callsite.
|
|
5
15
|
*/
|
|
6
|
-
export declare const serializeExpression: (expr: ExprNode | null) => string;
|
|
16
|
+
export declare const serializeExpression: (expr: ExprNode | null, fields?: FieldMetadata[]) => string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
|
|
1
2
|
const quoteValue = (v)=>`"${v}"`;
|
|
2
3
|
const serializeValue = (condition)=>{
|
|
3
4
|
if ('is_null' === condition.operator || 'is_not_null' === condition.operator) return '';
|
|
@@ -27,8 +28,10 @@ const serializeNode = (node, isTopLevel)=>{
|
|
|
27
28
|
if ('condition' === node.type) return serializeCondition(node);
|
|
28
29
|
return serializeGroup(node, isTopLevel);
|
|
29
30
|
};
|
|
30
|
-
const serializeExpression = (expr)=>{
|
|
31
|
+
const serializeExpression = (expr, fields)=>{
|
|
31
32
|
if (!expr) return '';
|
|
32
|
-
|
|
33
|
+
const normalized = fields ? applyFieldValueTransforms(expr, fields) : expr;
|
|
34
|
+
if (!normalized) return '';
|
|
35
|
+
return serializeNode(normalized, true);
|
|
33
36
|
};
|
|
34
37
|
export { serializeExpression };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Build the `serializeValue` callback for the HTTP status code field. Strips
|
|
3
|
+
* trailing mask placeholders (`X` / `x`) from the UI value so the backend
|
|
4
|
+
* receives the shorter class form:
|
|
5
|
+
*
|
|
6
|
+
* "2XX" → "2"
|
|
7
|
+
* "22X" → "22"
|
|
8
|
+
* "222" → "222"
|
|
9
|
+
* "4XX" → "4"
|
|
10
|
+
* "40X" → "40"
|
|
11
|
+
*
|
|
12
|
+
* Anything that isn't a status-code-shaped string (e.g. a number, boolean,
|
|
13
|
+
* or freeform text) is returned unchanged so invalid committed values still
|
|
14
|
+
* surface in the backend payload for the parser to reject.
|
|
15
|
+
*/
|
|
16
|
+
export declare const createStatusCodeSerializer: () => ((value: string | number | boolean) => string | number | boolean);
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import type { FieldValueOption } from '../../types';
|
|
2
|
-
import { type StatusCodeSuggestionsOptions } from './utils';
|
|
3
2
|
/**
|
|
4
3
|
* Build the `getSuggestions` callback for an HTTP status code field. The
|
|
5
4
|
* returned function:
|
|
6
|
-
* -
|
|
7
|
-
* - on empty input, offers every available class mask
|
|
5
|
+
* - on empty input, offers every HTTP class mask (`1XX..5XX`)
|
|
8
6
|
* - on partial input (`"3"`, `"3X"`, `"30"`, …), expands it via
|
|
9
7
|
* `canonicalizeStatusCodeInput` and offers the single matching mask
|
|
10
8
|
* - merges any `context.selectedValues` (values already committed to the
|
|
11
9
|
* chip) in front of the input-driven output so they always appear with
|
|
12
10
|
* their canonical badge styling
|
|
11
|
+
*
|
|
12
|
+
* No backend config is required — the status-code class range is fixed to
|
|
13
|
+
* `[1..5]` per the HTTP spec.
|
|
13
14
|
*/
|
|
14
|
-
export declare const createStatusCodeSuggestions: (
|
|
15
|
+
export declare const createStatusCodeSuggestions: () => ((inputText: string, context?: {
|
|
15
16
|
selectedValues?: Array<string | number | boolean>;
|
|
16
17
|
}) => FieldValueOption[]);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const createStatusCodeSuggestions = (
|
|
3
|
-
const
|
|
4
|
-
const resolveSelected = (selectedValues)=>(selectedValues ?? []).map((v)=>String(v)).filter((s)=>/^\d[\dX]{0,2}$/.test(s) && maskRoots.includes(s.charAt(0))).map((s)=>makeMask(s));
|
|
1
|
+
import { MASK_ROOTS, canonicalizeStatusCodeInput, makeMask } from "./utils/index.js";
|
|
2
|
+
const createStatusCodeSuggestions = ()=>{
|
|
3
|
+
const resolveSelected = (selectedValues)=>(selectedValues ?? []).map((v)=>String(v)).filter((s)=>/^\d[\dX]{0,2}$/.test(s) && MASK_ROOTS.includes(s.charAt(0))).map((s)=>makeMask(s));
|
|
5
4
|
return (inputText, context)=>{
|
|
6
5
|
const norm = inputText.trim();
|
|
7
6
|
const selected = resolveSelected(context?.selectedValues);
|
|
@@ -10,8 +9,8 @@ const createStatusCodeSuggestions = (options)=>{
|
|
|
10
9
|
...selected,
|
|
11
10
|
...primary.filter((o)=>!seen.has(String(o.value)))
|
|
12
11
|
];
|
|
13
|
-
if (0 === norm.length) return merge(
|
|
14
|
-
const mask = canonicalizeStatusCodeInput(norm
|
|
12
|
+
if (0 === norm.length) return merge(MASK_ROOTS.map((d)=>makeMask(`${d}XX`)));
|
|
13
|
+
const mask = canonicalizeStatusCodeInput(norm);
|
|
15
14
|
if (!mask) return selected;
|
|
16
15
|
return merge([
|
|
17
16
|
makeMask(mask)
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { type StatusCodeSuggestionsOptions } from './utils';
|
|
2
1
|
/**
|
|
3
2
|
* Build a validator for the HTTP status code field. Accepts only 3-character
|
|
4
3
|
* values whose leading digit is a valid HTTP class (`[1..5]`) and whose
|
|
@@ -9,11 +8,5 @@ import { type StatusCodeSuggestionsOptions } from './utils';
|
|
|
9
8
|
*
|
|
10
9
|
* Returns `true` when the value is invalid, matching the
|
|
11
10
|
* `FieldMetadata.validate` contract.
|
|
12
|
-
*
|
|
13
|
-
* The `options` argument is accepted for API symmetry with
|
|
14
|
-
* `createStatusCodeSuggestions` (same wiring on the field), but validity is
|
|
15
|
-
* bound to the static `[1..5]` HTTP class range rather than `codes` — the
|
|
16
|
-
* backend's available-data list doesn't narrow what the user may legitimately
|
|
17
|
-
* type.
|
|
18
11
|
*/
|
|
19
|
-
export declare const createStatusCodeValidator: (
|
|
12
|
+
export declare const createStatusCodeValidator: () => ((value: string | number | boolean) => boolean);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const createStatusCodeValidator = (
|
|
1
|
+
import { MASK_ROOTS, STATUS_CODE_LENGTH } from "./utils/index.js";
|
|
2
|
+
const createStatusCodeValidator = ()=>(value)=>{
|
|
3
3
|
const s = String(value);
|
|
4
4
|
if (s.length !== STATUS_CODE_LENGTH) return true;
|
|
5
|
-
if (!
|
|
5
|
+
if (!MASK_ROOTS.includes(s.charAt(0))) return true;
|
|
6
6
|
return !/^(XX|\dX|\d\d)$/.test(s.slice(1));
|
|
7
7
|
};
|
|
8
8
|
export { createStatusCodeValidator };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { createStatusCodeInputFilter } from './createStatusCodeInputFilter';
|
|
2
2
|
export { createStatusCodeNormalizer } from './createStatusCodeNormalizer';
|
|
3
|
+
export { createStatusCodeSerializer } from './createStatusCodeSerializer';
|
|
3
4
|
export { createStatusCodeSuggestions } from './createStatusCodeSuggestions';
|
|
4
5
|
export { createStatusCodeValidator } from './createStatusCodeValidator';
|
|
5
|
-
export type { StatusCodeSuggestionsOptions } from './utils';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createStatusCodeInputFilter } from "./createStatusCodeInputFilter.js";
|
|
2
2
|
import { createStatusCodeNormalizer } from "./createStatusCodeNormalizer.js";
|
|
3
|
+
import { createStatusCodeSerializer } from "./createStatusCodeSerializer.js";
|
|
3
4
|
import { createStatusCodeSuggestions } from "./createStatusCodeSuggestions.js";
|
|
4
5
|
import { createStatusCodeValidator } from "./createStatusCodeValidator.js";
|
|
5
|
-
export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator };
|
|
6
|
+
export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator };
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* Rejected:
|
|
15
15
|
* "3X0" (digit after placeholder)
|
|
16
16
|
* "X30" (starts with placeholder)
|
|
17
|
-
* "6..." (leading digit
|
|
17
|
+
* "6..." (leading digit outside the `[1..5]` HTTP class range)
|
|
18
18
|
* "ab..." (non-digit, non-X)
|
|
19
19
|
*/
|
|
20
|
-
export declare const canonicalizeStatusCodeInput: (input: string
|
|
20
|
+
export declare const canonicalizeStatusCodeInput: (input: string) => string | null;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { MASK_PLACEHOLDER, STATUS_CODE_LENGTH } from "./constants.js";
|
|
2
|
-
const canonicalizeStatusCodeInput = (input
|
|
1
|
+
import { MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH } from "./constants.js";
|
|
2
|
+
const canonicalizeStatusCodeInput = (input)=>{
|
|
3
3
|
const s = input.toUpperCase();
|
|
4
4
|
if (0 === s.length || s.length > STATUS_CODE_LENGTH) return null;
|
|
5
5
|
if (!/^[\dX]+$/.test(s)) return null;
|
|
6
6
|
const d1 = s.charAt(0);
|
|
7
|
-
if (d1 === MASK_PLACEHOLDER || !
|
|
7
|
+
if (d1 === MASK_PLACEHOLDER || !MASK_ROOTS.includes(d1)) return null;
|
|
8
8
|
if (1 === s.length) return `${d1}XX`;
|
|
9
9
|
const c2 = s.charAt(1);
|
|
10
10
|
if (c2 === MASK_PLACEHOLDER) {
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import type { BadgeColor } from '../../../../Badge';
|
|
2
2
|
/** The five valid HTTP status-code classes, used both for suggestion-building
|
|
3
|
-
* and validation. Backed by the standard HTTP spec
|
|
4
|
-
* backend
|
|
5
|
-
|
|
3
|
+
* and validation. Backed by the standard HTTP spec — entirely frontend-driven,
|
|
4
|
+
* independent of what the backend config carries.
|
|
5
|
+
*
|
|
6
|
+
* Typed as `readonly string[]` (not `as const`) so `.includes(someString)`
|
|
7
|
+
* stays callable without casting; declaration-file generation rejects the
|
|
8
|
+
* tuple-narrowed overload of `.includes`. */
|
|
9
|
+
export declare const MASK_ROOTS: readonly string[];
|
|
6
10
|
/** Badge color per HTTP class, keyed by the leading digit. Derived from the
|
|
7
11
|
* AS-877 Figma designs: informational greys, success greens, redirect blues,
|
|
8
12
|
* client-error ambers, server-error reds. */
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
const
|
|
1
|
+
const MASK_ROOTS = [
|
|
2
2
|
'1',
|
|
3
3
|
'2',
|
|
4
4
|
'3',
|
|
5
5
|
'4',
|
|
6
6
|
'5'
|
|
7
|
-
]
|
|
7
|
+
];
|
|
8
8
|
const HTTP_CLASS_BADGE_COLOR = {
|
|
9
9
|
1: 'slate',
|
|
10
10
|
2: 'green',
|
|
@@ -14,4 +14,4 @@ const HTTP_CLASS_BADGE_COLOR = {
|
|
|
14
14
|
};
|
|
15
15
|
const STATUS_CODE_LENGTH = 3;
|
|
16
16
|
const MASK_PLACEHOLDER = 'X';
|
|
17
|
-
export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER,
|
|
17
|
+
export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH };
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
export { canonicalizeStatusCodeInput } from './canonicalize';
|
|
2
|
-
export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER,
|
|
2
|
+
export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH, } from './constants';
|
|
3
3
|
export { makeMask } from './makeMask';
|
|
4
|
-
export { getMaskRoots } from './maskRoots';
|
|
5
|
-
export type { StatusCodeSuggestionsOptions } from './types';
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { canonicalizeStatusCodeInput } from "./canonicalize.js";
|
|
2
|
-
import { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER,
|
|
2
|
+
import { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH } from "./constants.js";
|
|
3
3
|
import { makeMask } from "./makeMask.js";
|
|
4
|
-
|
|
5
|
-
export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, STATUS_CODE_LENGTH, VALID_MASK_ROOTS, canonicalizeStatusCodeInput, getMaskRoots, makeMask };
|
|
4
|
+
export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH, canonicalizeStatusCodeInput, makeMask };
|
|
@@ -98,6 +98,15 @@ export interface FieldMetadata {
|
|
|
98
98
|
* commits apply this per token.
|
|
99
99
|
*/
|
|
100
100
|
normalize?: (value: string | number | boolean) => string | number | boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Optional backend-value transformer. The UI stores whatever
|
|
103
|
+
* `normalize` produced (e.g. `"2XX"`), but some backends want a
|
|
104
|
+
* stripped form (e.g. `"2"`). Pass the expression tree through
|
|
105
|
+
* `applyFieldValueTransforms(expr, fields)` — or a string through
|
|
106
|
+
* `serializeExpression(expr, fields)` — to apply this hook when
|
|
107
|
+
* emitting the query. Display in the chip is unaffected.
|
|
108
|
+
*/
|
|
109
|
+
serializeValue?: (value: string | number | boolean) => string | number | boolean;
|
|
101
110
|
}
|
|
102
111
|
/**
|
|
103
112
|
* Expression Tree Types
|
|
@@ -4,14 +4,14 @@ import { useDateSegment } from "@react-aria/datepicker";
|
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import { cn } from "../../utils/cn.js";
|
|
6
6
|
import { getMonthSegmentText } from "./utils.js";
|
|
7
|
-
const segmentVariants = cva(cn('relative outline-none text-left', 'font-sans text-sm transition-all', 'focus:bg-
|
|
7
|
+
const segmentVariants = cva(cn('relative outline-none text-left', 'font-sans text-sm transition-all', 'focus:bg-bg-fill-brand focus:text-text-primary-alt', 'focus:outline-none'), {
|
|
8
8
|
variants: {
|
|
9
9
|
isPlaceholder: {
|
|
10
10
|
true: 'text-text-secondary',
|
|
11
11
|
false: 'text-text-primary'
|
|
12
12
|
},
|
|
13
13
|
disabled: {
|
|
14
|
-
true: 'cursor-not-allowed',
|
|
14
|
+
true: 'cursor-not-allowed opacity-50',
|
|
15
15
|
false: 'hover:bg-states-primary-default-alt cursor-text'
|
|
16
16
|
},
|
|
17
17
|
type: {
|
|
@@ -5,4 +5,3 @@ export { TemporalSegmentGroup } from './TemporalSegmentGroup';
|
|
|
5
5
|
export { TimeDropdown, type TimeDropdownHandle } from './TimeDropdown';
|
|
6
6
|
export { useTemporalField } from './useTemporalField';
|
|
7
7
|
export { useTimeDropdownKeyCapture } from './useTimeDropdownKeyCapture';
|
|
8
|
-
export { getDefaultTemporalPlaceholder, type TemporalGranularity } from './utils';
|
|
@@ -5,5 +5,4 @@ import { TemporalSegmentGroup } from "./TemporalSegmentGroup.js";
|
|
|
5
5
|
import { TimeDropdown } from "./TimeDropdown.js";
|
|
6
6
|
import { useTemporalField } from "./useTemporalField.js";
|
|
7
7
|
import { useTimeDropdownKeyCapture } from "./useTimeDropdownKeyCapture.js";
|
|
8
|
-
|
|
9
|
-
export { TemporalClear, TemporalPlaceholder, TemporalSegment, TemporalSegmentGroup, TimeDropdown, getDefaultTemporalPlaceholder, useTemporalField, useTimeDropdownKeyCapture };
|
|
8
|
+
export { TemporalClear, TemporalPlaceholder, TemporalSegment, TemporalSegmentGroup, TimeDropdown, useTemporalField, useTimeDropdownKeyCapture };
|
|
@@ -1,10 +1,2 @@
|
|
|
1
1
|
export declare function getMonthName(monthNumber: number): string;
|
|
2
2
|
export declare function getMonthSegmentText(value: number | null, placeholder?: string): string;
|
|
3
|
-
export type TemporalGranularity = 'day' | 'hour' | 'minute' | 'second';
|
|
4
|
-
interface DefaultPlaceholderOptions {
|
|
5
|
-
granularity?: TemporalGranularity;
|
|
6
|
-
isRange?: boolean;
|
|
7
|
-
isTimeOnly?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export declare function getDefaultTemporalPlaceholder({ granularity, isRange, isTimeOnly, }: DefaultPlaceholderOptions): string;
|
|
10
|
-
export {};
|
|
@@ -8,9 +8,4 @@ function getMonthSegmentText(value, placeholder = 'MM') {
|
|
|
8
8
|
if (null == value) return placeholder;
|
|
9
9
|
return getMonthName(value);
|
|
10
10
|
}
|
|
11
|
-
|
|
12
|
-
if (isTimeOnly) return 'Select time';
|
|
13
|
-
if ('day' === granularity || void 0 === granularity) return isRange ? 'Select a date range' : 'Select a date';
|
|
14
|
-
return isRange ? 'Select date and time range' : 'Select date and time';
|
|
15
|
-
}
|
|
16
|
-
export { getDefaultTemporalPlaceholder, getMonthName, getMonthSegmentText };
|
|
11
|
+
export { getMonthName, getMonthSegmentText };
|
|
@@ -4,10 +4,8 @@ import { useTimeField } from "@react-aria/datepicker";
|
|
|
4
4
|
import { useLocale } from "@react-aria/i18n";
|
|
5
5
|
import { useTimeFieldState } from "@react-stately/datepicker";
|
|
6
6
|
import { DateInputInternal } from "../DateInput/index.js";
|
|
7
|
-
import {
|
|
8
|
-
const TimeInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'minute', placeholder
|
|
9
|
-
isTimeOnly: true
|
|
10
|
-
}), showTimeDropdown, timeStep, hourCycle, ...props }, forwardedRef)=>{
|
|
7
|
+
import { useTemporalField } from "../TemporalCore/index.js";
|
|
8
|
+
const TimeInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'minute', placeholder, showTimeDropdown, timeStep, hourCycle, ...props }, forwardedRef)=>{
|
|
11
9
|
const { locale } = useLocale();
|
|
12
10
|
const ref = useRef(null);
|
|
13
11
|
const finalRef = forwardedRef || ref;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "0.27.0",
|
|
3
|
-
"generatedAt": "2026-04-
|
|
3
|
+
"generatedAt": "2026-04-21T09:43:50.074Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Alert",
|
|
@@ -15198,7 +15198,7 @@
|
|
|
15198
15198
|
"name": "fields",
|
|
15199
15199
|
"type": "FieldMetadata[] | undefined",
|
|
15200
15200
|
"required": false,
|
|
15201
|
-
"
|
|
15201
|
+
"description": "Filter-field configurations driving the autocomplete. Most fields are\npassed through as-is, but a few names are **reserved** and auto-wired\nwith design-system helpers (`acceptChar` / `normalize` / `getSuggestions`\n/ `validate`). Current reserved names:\n\n - `status_code` — HTTP status code field (mask suggestions, format\n validation, digit-or-X input filter, partial-input normalization).\n\nConsumer-supplied callbacks always override the auto-wiring, so you can\nopt out per-field. For the same helpers on a field with a different\n`name`, import the factories (`createStatusCodeSuggestions`, …) and\nattach them manually."
|
|
15202
15202
|
},
|
|
15203
15203
|
{
|
|
15204
15204
|
"name": "value",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wallarm-org/design-system",
|
|
3
|
-
"version": "0.27.1
|
|
3
|
+
"version": "0.27.1",
|
|
4
4
|
"description": "Core design system library with React components and Storybook documentation",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/** Extract the HTTP class digits (`1`..`5`) that actually appear as single-
|
|
2
|
-
* character entries in the backend `codes` list. These become the "available"
|
|
3
|
-
* class masks the helper is willing to emit. */
|
|
4
|
-
export declare const getMaskRoots: (codes: string[] | undefined) => string[];
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export interface StatusCodeSuggestionsOptions {
|
|
2
|
-
/**
|
|
3
|
-
* Raw backend status-code list. The helper keeps only 1-char entries in
|
|
4
|
-
* `[1..5]` as mask roots; everything else is ignored. When omitted or
|
|
5
|
-
* empty, the helper returns `[]` for every input.
|
|
6
|
-
*/
|
|
7
|
-
codes?: string[];
|
|
8
|
-
}
|
|
File without changes
|