@wallarm-org/design-system 0.57.1-rc-feature-AS-1085.4 → 0.57.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/Badge/Badge.js +2 -1
- package/dist/components/Badge/classes.d.ts +2 -1
- package/dist/components/Badge/classes.js +7 -3
- package/dist/components/Code/Code.d.ts +1 -1
- package/dist/components/Code/Code.js +5 -4
- package/dist/components/Country/countries.d.ts +2 -2
- package/dist/components/Country/countries.js +2 -2
- package/dist/components/FilterInput/FilterInputMenu/FilterInputMenu.js +43 -3
- package/dist/components/FilterInput/hooks/useFilterInputExpression/buildChips.js +2 -6
- package/dist/components/FilterInput/index.d.ts +1 -1
- package/dist/components/FilterInput/index.js +2 -2
- package/dist/components/FilterInput/lib/applyKnownFieldHelpers.d.ts +6 -3
- package/dist/components/FilterInput/lib/applyKnownFieldHelpers.js +6 -6
- package/dist/components/FilterInput/lib/country/data.d.ts +8 -0
- package/dist/components/FilterInput/lib/country/data.js +6 -0
- package/dist/components/FilterInput/lib/country/index.d.ts +1 -0
- package/dist/components/FilterInput/lib/country/index.js +2 -0
- package/dist/components/FilterInput/lib/fields.d.ts +7 -0
- package/dist/components/FilterInput/lib/fields.js +9 -1
- package/dist/components/FilterInput/lib/index.d.ts +2 -1
- package/dist/components/FilterInput/lib/index.js +3 -2
- package/dist/components/NumericBadge/NumericBadge.d.ts +3 -5
- package/dist/components/NumericBadge/NumericBadge.js +10 -15
- package/dist/components/NumericBadge/classes.d.ts +5 -0
- package/dist/components/NumericBadge/classes.js +64 -0
- package/dist/metadata/components.json +51 -9
- package/package.json +1 -1
|
@@ -11,7 +11,8 @@ const Badge = ({ ref, className, variant = 'default', size = 'medium', type = 's
|
|
|
11
11
|
color,
|
|
12
12
|
muted,
|
|
13
13
|
textVariant,
|
|
14
|
-
isIconOnly: isIconOnly(children)
|
|
14
|
+
isIconOnly: isIconOnly(children),
|
|
15
|
+
isClickable: !!onClick
|
|
15
16
|
}), className);
|
|
16
17
|
const handleClick = onClick ? (event)=>{
|
|
17
18
|
event.stopPropagation();
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import type { BadgeColor } from './types';
|
|
2
2
|
export declare const badgeVariants: (props?: ({
|
|
3
3
|
variant?: "default" | "dotted" | null | undefined;
|
|
4
|
-
size?: "medium" | "large" | null | undefined;
|
|
4
|
+
size?: "small" | "medium" | "large" | null | undefined;
|
|
5
5
|
isIconOnly?: boolean | null | undefined;
|
|
6
6
|
type?: "secondary" | "text" | "outline" | "solid" | "text-color" | null | undefined;
|
|
7
7
|
color?: BadgeColor | null | undefined;
|
|
8
8
|
muted?: boolean | null | undefined;
|
|
9
9
|
textVariant?: "code" | "default" | null | undefined;
|
|
10
|
+
isClickable?: boolean | null | undefined;
|
|
10
11
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { cva } from "class-variance-authority";
|
|
2
2
|
import { BadgeColorEnum } from "./constants.js";
|
|
3
3
|
import { generateBadgeVariants } from "./generateBadgeVariants.js";
|
|
4
|
-
const badgeVariants = cva('inline-flex items-center gap-4
|
|
4
|
+
const badgeVariants = cva('inline-flex items-center gap-4', {
|
|
5
5
|
variants: {
|
|
6
6
|
variant: {
|
|
7
7
|
default: '',
|
|
8
8
|
dotted: 'before:w-6 before:h-6 before:bg-current before:rounded-2'
|
|
9
9
|
},
|
|
10
10
|
size: {
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
small: 'h-16 py-2 px-4 [&_svg]:icon-xs rounded-6',
|
|
12
|
+
medium: 'h-20 py-2 px-6 [&_svg]:icon-sm rounded-8',
|
|
13
|
+
large: 'h-24 py-4 px-6 [&_svg]:icon-md rounded-8'
|
|
13
14
|
},
|
|
14
15
|
isIconOnly: {
|
|
15
16
|
true: 'justify-center p-2'
|
|
@@ -32,6 +33,9 @@ const badgeVariants = cva('inline-flex items-center gap-4 rounded-8', {
|
|
|
32
33
|
textVariant: {
|
|
33
34
|
default: 'font-sans-display text-xs font-medium',
|
|
34
35
|
code: 'font-mono leading-sm text-xs font-medium'
|
|
36
|
+
},
|
|
37
|
+
isClickable: {
|
|
38
|
+
true: 'cursor-pointer'
|
|
35
39
|
}
|
|
36
40
|
},
|
|
37
41
|
compoundVariants: [
|
|
@@ -2,7 +2,7 @@ import type { FC, HTMLAttributes, PropsWithChildren, Ref } from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
import type { TestableProps } from '../../utils/testId';
|
|
4
4
|
declare const codeVariants: (props?: ({
|
|
5
|
-
size?: "s" | "m" | "l" | null | undefined;
|
|
5
|
+
size?: "s" | "xs" | "m" | "l" | null | undefined;
|
|
6
6
|
weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
|
|
7
7
|
color?: "primary" | "secondary" | "destructive" | null | undefined;
|
|
8
8
|
italic?: boolean | null | undefined;
|
|
@@ -2,12 +2,13 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Slot } from "@radix-ui/react-slot";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { cn } from "../../utils/cn.js";
|
|
5
|
-
const codeVariants = cva('font-mono
|
|
5
|
+
const codeVariants = cva('font-mono', {
|
|
6
6
|
variants: {
|
|
7
7
|
size: {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
xs: 'text-2xs leading-2xs',
|
|
9
|
+
s: 'text-xs leading-xs',
|
|
10
|
+
m: 'text-sm leading-sm',
|
|
11
|
+
l: 'text-base leading-sm'
|
|
11
12
|
},
|
|
12
13
|
weight: {
|
|
13
14
|
light: 'font-light',
|
|
@@ -252,7 +252,7 @@ export declare const countries: {
|
|
|
252
252
|
readonly flag: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22border-radius%3A50%25%22%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M35.5%20256h444l32.5-66.8V0H322.8L256%2031.8v444.6L189.2%20512H0V322.8z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M479.5%20256h-444L0%20189.2V0h189.2L256%2031.8v444.6l66.8%2035.6H512V322.8z%22%2F%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M189.2%200h133.6v189.2H512v133.6H322.8V512H189.2V322.8H0V189.2h189.2z%22%2F%3E%3Cpath%20fill%3D%22%23496e2d%22%20d%3D%22M322.8%20256a66.8%2066.8%200%201%201-133.6%200c0-36.9%2066.8-66.8%2066.8-66.8s66.8%2030%2066.8%2066.8z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M189.2%20256a66.8%2066.8%200%201%201%20133.6%200%22%2F%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M218.4%20222.6v41.7a37.6%2037.6%200%201%200%2075.2%200v-41.7z%22%2F%3E%3C%2Fsvg%3E";
|
|
253
253
|
};
|
|
254
254
|
readonly DNO: {
|
|
255
|
-
readonly name: "Donetsk Oblast
|
|
255
|
+
readonly name: "Donetsk Oblast";
|
|
256
256
|
readonly flag: "data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22M512%20341.333H0V512h512V341.333Z%22%20fill%3D%22%23D80027%22%2F%3E%3Cpath%20d%3D%22M512%20170.667H0v170.666h512V170.667Z%22%20fill%3D%22%230052B4%22%2F%3E%3Cpath%20d%3D%22M512%200H0v170.667h512V0Z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20width%3D%22512%22%20height%3D%22512%22%20rx%3D%22256%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
|
|
257
257
|
};
|
|
258
258
|
readonly EC: {
|
|
@@ -876,7 +876,7 @@ export declare const countries: {
|
|
|
876
876
|
readonly flag: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22border-radius%3A50%25%22%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22m0%20167%20253.8-19.3L512%20167v178l-254.9%2032.3L0%20345z%22%2F%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M0%200h512v167H0z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M0%20345h512v167H0z%22%2F%3E%3Cpath%20fill%3D%22%236da544%22%20d%3D%22m153%20194.8%2013.8%2042.5h44.7l-36.2%2026.3%2013.8%2042.5-36.1-26.3-36.2%2026.3%2013.8-42.5-36.2-26.3h44.7zm206%200%2013.9%2042.5h44.7l-36.2%2026.3%2013.8%2042.5-36.2-26.3-36.1%2026.3%2013.8-42.5-36.2-26.3h44.7z%22%2F%3E%3C%2Fsvg%3E";
|
|
877
877
|
};
|
|
878
878
|
readonly TW: {
|
|
879
|
-
readonly name: "Taiwan, Province of China
|
|
879
|
+
readonly name: "Taiwan, Province of China";
|
|
880
880
|
readonly flag: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22border-radius%3A50%25%22%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M0%20256%20256%200h256v512H0z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M256%20256V0H0v256z%22%2F%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22m222.6%20149.8-31.3%2014.7%2016.7%2030.3-34-6.5-4.3%2034.3-23.6-25.2-23.7%2025.2-4.3-34.3-34%206.5%2016.7-30.3-31.2-14.7%2031.2-14.7-16.6-30.3%2034%206.5%204.2-34.3%2023.7%2025.3L169.7%2077l4.3%2034.3%2034-6.5-16.7%2030.3z%22%2F%3E%3Ccircle%20cx%3D%22146.1%22%20cy%3D%22149.8%22%20r%3D%2247.7%22%20fill%3D%22%230052b4%22%2F%3E%3Ccircle%20cx%3D%22146.1%22%20cy%3D%22149.8%22%20fill%3D%22%23eee%22%20r%3D%2241.5%22%2F%3E%3C%2Fsvg%3E";
|
|
881
881
|
};
|
|
882
882
|
readonly TJ: {
|
|
@@ -252,7 +252,7 @@ const countries = {
|
|
|
252
252
|
flag: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22border-radius%3A50%25%22%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M35.5%20256h444l32.5-66.8V0H322.8L256%2031.8v444.6L189.2%20512H0V322.8z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M479.5%20256h-444L0%20189.2V0h189.2L256%2031.8v444.6l66.8%2035.6H512V322.8z%22%2F%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M189.2%200h133.6v189.2H512v133.6H322.8V512H189.2V322.8H0V189.2h189.2z%22%2F%3E%3Cpath%20fill%3D%22%23496e2d%22%20d%3D%22M322.8%20256a66.8%2066.8%200%201%201-133.6%200c0-36.9%2066.8-66.8%2066.8-66.8s66.8%2030%2066.8%2066.8z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M189.2%20256a66.8%2066.8%200%201%201%20133.6%200%22%2F%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M218.4%20222.6v41.7a37.6%2037.6%200%201%200%2075.2%200v-41.7z%22%2F%3E%3C%2Fsvg%3E'
|
|
253
253
|
},
|
|
254
254
|
DNO: {
|
|
255
|
-
name: 'Donetsk Oblast
|
|
255
|
+
name: 'Donetsk Oblast',
|
|
256
256
|
flag: 'data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22M512%20341.333H0V512h512V341.333Z%22%20fill%3D%22%23D80027%22%2F%3E%3Cpath%20d%3D%22M512%20170.667H0v170.666h512V170.667Z%22%20fill%3D%22%230052B4%22%2F%3E%3Cpath%20d%3D%22M512%200H0v170.667h512V0Z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20width%3D%22512%22%20height%3D%22512%22%20rx%3D%22256%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E'
|
|
257
257
|
},
|
|
258
258
|
EC: {
|
|
@@ -876,7 +876,7 @@ const countries = {
|
|
|
876
876
|
flag: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22border-radius%3A50%25%22%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22m0%20167%20253.8-19.3L512%20167v178l-254.9%2032.3L0%20345z%22%2F%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M0%200h512v167H0z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M0%20345h512v167H0z%22%2F%3E%3Cpath%20fill%3D%22%236da544%22%20d%3D%22m153%20194.8%2013.8%2042.5h44.7l-36.2%2026.3%2013.8%2042.5-36.1-26.3-36.2%2026.3%2013.8-42.5-36.2-26.3h44.7zm206%200%2013.9%2042.5h44.7l-36.2%2026.3%2013.8%2042.5-36.2-26.3-36.1%2026.3%2013.8-42.5-36.2-26.3h44.7z%22%2F%3E%3C%2Fsvg%3E'
|
|
877
877
|
},
|
|
878
878
|
TW: {
|
|
879
|
-
name: 'Taiwan, Province of China
|
|
879
|
+
name: 'Taiwan, Province of China',
|
|
880
880
|
flag: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22border-radius%3A50%25%22%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M0%20256%20256%200h256v512H0z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M256%20256V0H0v256z%22%2F%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22m222.6%20149.8-31.3%2014.7%2016.7%2030.3-34-6.5-4.3%2034.3-23.6-25.2-23.7%2025.2-4.3-34.3-34%206.5%2016.7-30.3-31.2-14.7%2031.2-14.7-16.6-30.3%2034%206.5%204.2-34.3%2023.7%2025.3L169.7%2077l4.3%2034.3%2034-6.5-16.7%2030.3z%22%2F%3E%3Ccircle%20cx%3D%22146.1%22%20cy%3D%22149.8%22%20r%3D%2247.7%22%20fill%3D%22%230052b4%22%2F%3E%3Ccircle%20cx%3D%22146.1%22%20cy%3D%22149.8%22%20fill%3D%22%23eee%22%20r%3D%2241.5%22%2F%3E%3C%2Fsvg%3E'
|
|
881
881
|
},
|
|
882
882
|
TJ: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
|
|
4
|
-
import { getCurrentValueTokenText, getFieldValues, getValueFilterText, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
|
|
4
|
+
import { findValueLabelInFields, getCurrentValueTokenText, getFieldValues, getValueFilterText, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
|
|
5
5
|
import { FilterInputDateValueMenu } from "./FilterInputDateValueMenu/index.js";
|
|
6
6
|
import { FilterInputFieldMenu } from "./FilterInputFieldMenu/index.js";
|
|
7
7
|
import { FilterInputOperatorMenu } from "./FilterInputOperatorMenu.js";
|
|
@@ -23,7 +23,47 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
|
|
|
23
23
|
editingSingleValue
|
|
24
24
|
]);
|
|
25
25
|
const selectedFieldValues = selectedField ? getFieldValues(selectedField, currentTokenText, selectedContext) : [];
|
|
26
|
-
const
|
|
26
|
+
const menuValues = useMemo(()=>{
|
|
27
|
+
const selected = [
|
|
28
|
+
...editingMultiValues,
|
|
29
|
+
...null != editingSingleValue ? [
|
|
30
|
+
editingSingleValue
|
|
31
|
+
] : []
|
|
32
|
+
];
|
|
33
|
+
if (0 === selected.length) return selectedFieldValues;
|
|
34
|
+
const result = [
|
|
35
|
+
...selectedFieldValues
|
|
36
|
+
];
|
|
37
|
+
const indexByKey = new Map(result.map((o, i)=>[
|
|
38
|
+
String(o.value),
|
|
39
|
+
i
|
|
40
|
+
]));
|
|
41
|
+
for (const v of selected){
|
|
42
|
+
const key = String(v);
|
|
43
|
+
const i = indexByKey.get(key);
|
|
44
|
+
if (null != i && result[i].label !== key) continue;
|
|
45
|
+
const label = findValueLabelInFields(v, fields);
|
|
46
|
+
if (void 0 !== label) if (null != i) result[i] = {
|
|
47
|
+
...result[i],
|
|
48
|
+
value: v,
|
|
49
|
+
label
|
|
50
|
+
};
|
|
51
|
+
else {
|
|
52
|
+
result.push({
|
|
53
|
+
value: v,
|
|
54
|
+
label
|
|
55
|
+
});
|
|
56
|
+
indexByKey.set(key, result.length - 1);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
return result;
|
|
60
|
+
}, [
|
|
61
|
+
selectedFieldValues,
|
|
62
|
+
editingMultiValues,
|
|
63
|
+
editingSingleValue,
|
|
64
|
+
fields
|
|
65
|
+
]);
|
|
66
|
+
const valueFilterText = getValueFilterText(currentTokenText, selectedOperator, menuValues);
|
|
27
67
|
const showOperatorMenu = !!selectedField;
|
|
28
68
|
const showValueMenu = !!selectedField && !!selectedOperator;
|
|
29
69
|
const isDateField = selectedField?.type === 'date';
|
|
@@ -66,7 +106,7 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
|
|
|
66
106
|
initialRangeValue: editingDateRange,
|
|
67
107
|
filterText: valueFilterText
|
|
68
108
|
}) : hasValueOptions && /*#__PURE__*/ jsx(FilterInputValueMenu, {
|
|
69
|
-
values:
|
|
109
|
+
values: menuValues,
|
|
70
110
|
open: 'value' === menuState,
|
|
71
111
|
onSelect: handleValueSelect,
|
|
72
112
|
onCommit: handleMultiCommit,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
|
|
2
|
-
import { NO_VALUE_PLACEHOLDER, findOptionByValue, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, isNoValueOperator } from "../../lib/index.js";
|
|
2
|
+
import { NO_VALUE_PLACEHOLDER, findOptionByValue, findValueLabelInFields, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, isNoValueOperator } from "../../lib/index.js";
|
|
3
3
|
const INVALID_DATE = 'Invalid Date';
|
|
4
4
|
const DATE_RANGE_SEPARATOR = ' – ';
|
|
5
5
|
const MULTI_VALUE_SEPARATOR = ', ';
|
|
@@ -26,11 +26,7 @@ const resolveValueLabel = (value, field, fields, crossField)=>{
|
|
|
26
26
|
const own = findOptionByValue(field, value)?.label;
|
|
27
27
|
if (void 0 !== own) return own;
|
|
28
28
|
if (!crossField) return;
|
|
29
|
-
|
|
30
|
-
if (f === field) continue;
|
|
31
|
-
const label = findOptionByValue(f, value)?.label;
|
|
32
|
-
if (void 0 !== label) return label;
|
|
33
|
-
}
|
|
29
|
+
return findValueLabelInFields(value, fields);
|
|
34
30
|
};
|
|
35
31
|
const resolveDisplayValue = (condition, field, fields, crossField)=>{
|
|
36
32
|
const raw = String(condition.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 { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField, } from './lib';
|
|
4
|
+
export { applyFieldValueTransforms, COUNTRY_OPTIONS, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField, } 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 { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField } from "./lib/index.js";
|
|
5
|
-
export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField };
|
|
4
|
+
import { COUNTRY_OPTIONS, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField } from "./lib/index.js";
|
|
5
|
+
export { COUNTRY_OPTIONS, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField };
|
|
@@ -8,10 +8,13 @@ import type { FieldMetadata } from '../types';
|
|
|
8
8
|
* | `name` | DS owns |
|
|
9
9
|
* | ------------- | -------------------------------------------------------- |
|
|
10
10
|
* | `status_code` | acceptChar, normalize, getSuggestions, validate, serializeValue |
|
|
11
|
+
* | `country` | values (bundled ISO country allowlist) |
|
|
11
12
|
*
|
|
12
|
-
* Backend with a different name (e.g. `http_status_code`) must either rename
|
|
13
|
-
*
|
|
14
|
-
*
|
|
13
|
+
* Backend with a different name (e.g. `http_status_code`) must either rename or
|
|
14
|
+
* wire the pieces manually (`createStatusCode*`, `COUNTRY_OPTIONS`). Only the
|
|
15
|
+
* slots a helper provides are overridden; others keep the consumer's value.
|
|
16
|
+
* Returns the input array by reference when no field matches (stable identity
|
|
17
|
+
* for downstream memos).
|
|
15
18
|
*/
|
|
16
19
|
export declare const applyKnownFieldHelpers: (fields: FieldMetadata[]) => FieldMetadata[];
|
|
17
20
|
/**
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { COUNTRY_OPTIONS } from "./country/index.js";
|
|
1
2
|
import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
|
|
2
3
|
const KNOWN_FIELD_HELPERS = {
|
|
3
4
|
status_code: ()=>({
|
|
@@ -6,6 +7,10 @@ const KNOWN_FIELD_HELPERS = {
|
|
|
6
7
|
getSuggestions: createStatusCodeSuggestions(),
|
|
7
8
|
validate: createStatusCodeValidator(),
|
|
8
9
|
serializeValue: createStatusCodeSerializer()
|
|
10
|
+
}),
|
|
11
|
+
country: ()=>({
|
|
12
|
+
values: COUNTRY_OPTIONS,
|
|
13
|
+
getSuggestions: void 0
|
|
9
14
|
})
|
|
10
15
|
};
|
|
11
16
|
const applyKnownFieldHelpers = (fields)=>{
|
|
@@ -13,15 +18,10 @@ const applyKnownFieldHelpers = (fields)=>{
|
|
|
13
18
|
const out = fields.map((field)=>{
|
|
14
19
|
const factory = KNOWN_FIELD_HELPERS[field.name];
|
|
15
20
|
if (!factory) return field;
|
|
16
|
-
const helpers = factory();
|
|
17
21
|
changed = true;
|
|
18
22
|
return {
|
|
19
23
|
...field,
|
|
20
|
-
|
|
21
|
-
normalize: helpers.normalize,
|
|
22
|
-
getSuggestions: helpers.getSuggestions,
|
|
23
|
-
validate: helpers.validate,
|
|
24
|
-
serializeValue: helpers.serializeValue
|
|
24
|
+
...factory()
|
|
25
25
|
};
|
|
26
26
|
});
|
|
27
27
|
return changed ? out : fields;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FieldValueOption } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* ISO 3166-1 alpha-2 country options, derived from the shared `countries` map
|
|
4
|
+
* so the country filter does not depend on the backend shipping the full list.
|
|
5
|
+
* `value` is the alpha-2 code, `label` the name as stored in `countries`.
|
|
6
|
+
* Sorted by label.
|
|
7
|
+
*/
|
|
8
|
+
export declare const COUNTRY_OPTIONS: FieldValueOption[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { COUNTRY_OPTIONS } from './data';
|
|
@@ -5,6 +5,13 @@ import type { FieldMetadata, FieldValueOption } from '../types';
|
|
|
5
5
|
* primitives (5 → "5") and strict === would miss the canonical option.
|
|
6
6
|
*/
|
|
7
7
|
export declare const findOptionByValue: (field: FieldMetadata | undefined, value: string | number | boolean | null | undefined) => FieldValueOption | undefined;
|
|
8
|
+
/**
|
|
9
|
+
* Find a value's human label across *all* fields' option lists. Used when a
|
|
10
|
+
* value isn't defined on its current field (e.g. after a field change) but its
|
|
11
|
+
* label still lives on the field it came from, so the chip and the value menu
|
|
12
|
+
* can both show the label instead of the raw value.
|
|
13
|
+
*/
|
|
14
|
+
export declare const findValueLabelInFields: (value: string | number | boolean | null | undefined, fields: FieldMetadata[]) => string | undefined;
|
|
8
15
|
/**
|
|
9
16
|
* Get value options for a field — priority: getSuggestions > values > options.
|
|
10
17
|
* `context.selectedValues` lets helpers preserve a committed value's badge
|
|
@@ -3,6 +3,14 @@ const findOptionByValue = (field, value)=>{
|
|
|
3
3
|
const key = String(value);
|
|
4
4
|
return field.values.find((opt)=>String(opt.value) === key);
|
|
5
5
|
};
|
|
6
|
+
const findValueLabelInFields = (value, fields)=>{
|
|
7
|
+
if (null == value) return;
|
|
8
|
+
const key = String(value);
|
|
9
|
+
for (const f of fields){
|
|
10
|
+
const opt = f.values?.find((o)=>String(o.value) === key);
|
|
11
|
+
if (opt) return opt.label;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
6
14
|
const getFieldValues = (field, inputText = '', context)=>{
|
|
7
15
|
if (field.getSuggestions) return field.getSuggestions(inputText, context);
|
|
8
16
|
const fromValues = field.values ?? [];
|
|
@@ -22,4 +30,4 @@ const hasStaticAllowlist = (field)=>{
|
|
|
22
30
|
if ((field.values?.length ?? 0) > 0) return true;
|
|
23
31
|
return (field.options?.length ?? 0) > 0;
|
|
24
32
|
};
|
|
25
|
-
export { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist };
|
|
33
|
+
export { findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist };
|
|
@@ -5,8 +5,9 @@ export { applyFieldValueTransforms } from './applyFieldValueTransforms';
|
|
|
5
5
|
export { applyKnownFieldHelpers, getKnownFieldSerializer } from './applyKnownFieldHelpers';
|
|
6
6
|
export { chipIdToConditionIndex, findChipSplitIndex } from './conditions';
|
|
7
7
|
export { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
|
|
8
|
+
export { COUNTRY_OPTIONS } from './country';
|
|
8
9
|
export { type AnchorBounds, buildAnchoredRect, isMenuRelated, toAnchorBounds } from './dom';
|
|
9
|
-
export { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist } from './fields';
|
|
10
|
+
export { findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist, } from './fields';
|
|
10
11
|
export { filterAndSort } from './filterSort';
|
|
11
12
|
export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
|
|
12
13
|
export { getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, NO_VALUE_PLACEHOLDER, nextBuildingMenu, } from './operators';
|
|
@@ -4,8 +4,9 @@ import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
|
|
|
4
4
|
import { applyKnownFieldHelpers, getKnownFieldSerializer } from "./applyKnownFieldHelpers.js";
|
|
5
5
|
import { chipIdToConditionIndex, findChipSplitIndex } from "./conditions.js";
|
|
6
6
|
import { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
|
|
7
|
+
import { COUNTRY_OPTIONS } from "./country/index.js";
|
|
7
8
|
import { buildAnchoredRect, isMenuRelated, toAnchorBounds } from "./dom.js";
|
|
8
|
-
import { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
|
|
9
|
+
import { findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
|
|
9
10
|
import { filterAndSort } from "./filterSort.js";
|
|
10
11
|
import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.js";
|
|
11
12
|
import { NO_VALUE_PLACEHOLDER, getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu } from "./operators.js";
|
|
@@ -14,4 +15,4 @@ import { SEGMENT_TO_MENU } from "./segmentMenu.js";
|
|
|
14
15
|
import { serializeExpression } from "./serializeExpression.js";
|
|
15
16
|
import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
|
|
16
17
|
import { findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField } from "./validation.js";
|
|
17
|
-
export { CONNECTOR_ID_PATTERN, 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, 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 };
|
|
18
|
+
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 };
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import type { FC, HTMLAttributes } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
3
3
|
import type { TestableProps } from '../../utils/testId';
|
|
4
|
-
|
|
5
|
-
type?: "primary" | "destructive" | "info" | "primary-alt" | "brand" | "outline" | null | undefined;
|
|
6
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
4
|
+
import { numericBadgeVariants } from './classes';
|
|
7
5
|
type NumericBadgeNativeProps = HTMLAttributes<HTMLDivElement>;
|
|
8
|
-
type NumericBadgeVariantsProps = VariantProps<typeof numericBadgeVariants>;
|
|
6
|
+
type NumericBadgeVariantsProps = Omit<VariantProps<typeof numericBadgeVariants>, 'clickable'>;
|
|
9
7
|
export type NumericBadgeProps = NumericBadgeNativeProps & NumericBadgeVariantsProps & TestableProps;
|
|
10
8
|
export declare const NumericBadge: FC<NumericBadgeProps>;
|
|
11
9
|
export {};
|
|
@@ -1,25 +1,20 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cva } from "class-variance-authority";
|
|
3
2
|
import { cn } from "../../utils/cn.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
'primary-alt': 'border-transparent bg-states-primary-alt-active text-text-primary-alt',
|
|
9
|
-
brand: 'border-bg-fill-brand bg-bg-fill-brand text-text-primary-alt',
|
|
10
|
-
destructive: 'border-bg-fill-danger bg-bg-fill-danger text-text-primary-alt',
|
|
11
|
-
outline: 'border-border-primary bg-component-outline-button-bg text-text-primary',
|
|
12
|
-
info: 'border-states-info-active bg-states-info-active text-text-info'
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
const NumericBadge = ({ type = 'primary', ...props })=>/*#__PURE__*/ jsx("div", {
|
|
3
|
+
import { numericBadgeVariants } from "./classes.js";
|
|
4
|
+
const NumericBadge = ({ type = 'primary', size = 'default', onClick, ...props })=>{
|
|
5
|
+
const isClickable = !!onClick;
|
|
6
|
+
return /*#__PURE__*/ jsx("div", {
|
|
17
7
|
...props,
|
|
8
|
+
tabIndex: isClickable ? 0 : void 0,
|
|
18
9
|
"data-slot": "numeric-badge",
|
|
19
10
|
"data-type": type,
|
|
11
|
+
onClick: onClick,
|
|
20
12
|
className: cn(numericBadgeVariants({
|
|
21
|
-
type
|
|
13
|
+
type,
|
|
14
|
+
size,
|
|
15
|
+
clickable: isClickable
|
|
22
16
|
}))
|
|
23
17
|
});
|
|
18
|
+
};
|
|
24
19
|
NumericBadge.displayName = 'NumericBadge';
|
|
25
20
|
export { NumericBadge };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const numericBadgeVariants: (props?: ({
|
|
2
|
+
type?: "primary" | "destructive" | "info" | "primary-alt" | "brand" | "outline" | null | undefined;
|
|
3
|
+
size?: "small" | "default" | null | undefined;
|
|
4
|
+
clickable?: boolean | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
const numericBadgeVariants = cva('inline-flex items-center rounded-full font-mono font-medium transition-colors w-max', {
|
|
3
|
+
variants: {
|
|
4
|
+
type: {
|
|
5
|
+
primary: 'bg-states-primary-active text-text-primary',
|
|
6
|
+
'primary-alt': 'bg-states-primary-alt-active text-text-primary-alt',
|
|
7
|
+
brand: 'bg-bg-fill-brand text-text-primary-alt',
|
|
8
|
+
destructive: 'bg-bg-fill-danger text-text-primary-alt',
|
|
9
|
+
outline: 'border-1 border-border-primary bg-component-outline-button-bg text-text-primary',
|
|
10
|
+
info: 'bg-states-info-active text-text-info'
|
|
11
|
+
},
|
|
12
|
+
size: {
|
|
13
|
+
default: 'px-5 py-2 text-xs',
|
|
14
|
+
small: 'p-3 text-2xs'
|
|
15
|
+
},
|
|
16
|
+
clickable: {
|
|
17
|
+
true: 'cursor-pointer overlay active:outline-none active:ring-3',
|
|
18
|
+
false: ''
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
compoundVariants: [
|
|
22
|
+
{
|
|
23
|
+
type: 'outline',
|
|
24
|
+
size: 'default',
|
|
25
|
+
className: 'px-4 py-1'
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
type: 'outline',
|
|
29
|
+
size: 'small',
|
|
30
|
+
className: 'p-2'
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
clickable: true,
|
|
34
|
+
type: 'primary',
|
|
35
|
+
className: 'hover:overlay-states-primary-hover active:overlay-states-primary-hover active:ring-focus-primary'
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
clickable: true,
|
|
39
|
+
type: 'primary-alt',
|
|
40
|
+
className: 'hover:overlay-states-primary-alt-hover active:overlay-states-primary-alt-hover active:ring-focus-primary'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
clickable: true,
|
|
44
|
+
type: 'brand',
|
|
45
|
+
className: 'hover:overlay-states-on-fill-hover active:overlay-states-on-fill-hover active:ring-focus-brand'
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
clickable: true,
|
|
49
|
+
type: 'destructive',
|
|
50
|
+
className: 'hover:overlay-states-on-fill-hover active:overlay-states-on-fill-hover active:ring-focus-destructive'
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
clickable: true,
|
|
54
|
+
type: 'outline',
|
|
55
|
+
className: 'hover:overlay-states-primary-hover active:overlay-states-primary-hover active:ring-focus-primary'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
clickable: true,
|
|
59
|
+
type: 'info',
|
|
60
|
+
className: 'hover:overlay-states-info-hover active:overlay-states-info-hover active:ring-focus-primary'
|
|
61
|
+
}
|
|
62
|
+
]
|
|
63
|
+
});
|
|
64
|
+
export { numericBadgeVariants };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "0.57.0",
|
|
3
|
-
"generatedAt": "2026-06-
|
|
3
|
+
"generatedAt": "2026-06-11T11:21:08.709Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -7779,7 +7779,7 @@
|
|
|
7779
7779
|
},
|
|
7780
7780
|
{
|
|
7781
7781
|
"name": "size",
|
|
7782
|
-
"type": "{ medium: string; large: string; }",
|
|
7782
|
+
"type": "{ small: string; medium: string; large: string; }",
|
|
7783
7783
|
"required": false,
|
|
7784
7784
|
"defaultValue": "medium"
|
|
7785
7785
|
},
|
|
@@ -7806,6 +7806,11 @@
|
|
|
7806
7806
|
"required": false,
|
|
7807
7807
|
"defaultValue": "default"
|
|
7808
7808
|
},
|
|
7809
|
+
{
|
|
7810
|
+
"name": "isClickable",
|
|
7811
|
+
"type": "{ true: string; }",
|
|
7812
|
+
"required": false
|
|
7813
|
+
},
|
|
7809
7814
|
{
|
|
7810
7815
|
"name": "asChild",
|
|
7811
7816
|
"type": "boolean | undefined",
|
|
@@ -7825,6 +7830,7 @@
|
|
|
7825
7830
|
{
|
|
7826
7831
|
"name": "size",
|
|
7827
7832
|
"options": [
|
|
7833
|
+
"small",
|
|
7828
7834
|
"medium",
|
|
7829
7835
|
"large"
|
|
7830
7836
|
]
|
|
@@ -7862,6 +7868,12 @@
|
|
|
7862
7868
|
"default",
|
|
7863
7869
|
"code"
|
|
7864
7870
|
]
|
|
7871
|
+
},
|
|
7872
|
+
{
|
|
7873
|
+
"name": "isClickable",
|
|
7874
|
+
"options": [
|
|
7875
|
+
"true"
|
|
7876
|
+
]
|
|
7865
7877
|
}
|
|
7866
7878
|
],
|
|
7867
7879
|
"subComponents": [],
|
|
@@ -7876,7 +7888,7 @@
|
|
|
7876
7888
|
},
|
|
7877
7889
|
{
|
|
7878
7890
|
"name": "Sizes",
|
|
7879
|
-
"code": "({ ...args }) => (\n <HStack align='center' gap={8}>\n <Badge {...args} size='medium'>\n Medium\n </Badge>\n <Badge {...args} size='large'>\n Large\n </Badge>\n </HStack>\n)"
|
|
7891
|
+
"code": "({ ...args }) => (\n <HStack align='center' gap={8}>\n <Badge {...args} size='small'>\n Small\n </Badge>\n <Badge {...args} size='medium'>\n Medium\n </Badge>\n <Badge {...args} size='large'>\n Large\n </Badge>\n </HStack>\n)"
|
|
7880
7892
|
},
|
|
7881
7893
|
{
|
|
7882
7894
|
"name": "Types",
|
|
@@ -15084,7 +15096,7 @@
|
|
|
15084
15096
|
},
|
|
15085
15097
|
{
|
|
15086
15098
|
"name": "size",
|
|
15087
|
-
"type": "{ s: string; m: string; l: string; }",
|
|
15099
|
+
"type": "{ xs: string; s: string; m: string; l: string; }",
|
|
15088
15100
|
"required": false,
|
|
15089
15101
|
"defaultValue": "l"
|
|
15090
15102
|
},
|
|
@@ -15122,6 +15134,7 @@
|
|
|
15122
15134
|
{
|
|
15123
15135
|
"name": "size",
|
|
15124
15136
|
"options": [
|
|
15137
|
+
"xs",
|
|
15125
15138
|
"s",
|
|
15126
15139
|
"m",
|
|
15127
15140
|
"l"
|
|
@@ -15167,7 +15180,7 @@
|
|
|
15167
15180
|
},
|
|
15168
15181
|
{
|
|
15169
15182
|
"name": "Sizes",
|
|
15170
|
-
"code": "({ ...args }) => (\n <VStack align='start'>\n <Code {...args} size='s'>\n console.log('Small code text');\n </Code>\n <Code {...args} size='m'>\n console.log('Medium code text');\n </Code>\n <Code {...args} size='l'>\n console.log('Large code text');\n </Code>\n </VStack>\n)"
|
|
15183
|
+
"code": "({ ...args }) => (\n <VStack align='start'>\n <Code {...args} size='xs'>\n console.log('Extra small code text');\n </Code>\n <Code {...args} size='s'>\n console.log('Small code text');\n </Code>\n <Code {...args} size='m'>\n console.log('Medium code text');\n </Code>\n <Code {...args} size='l'>\n console.log('Large code text');\n </Code>\n </VStack>\n)"
|
|
15171
15184
|
},
|
|
15172
15185
|
{
|
|
15173
15186
|
"name": "Weights",
|
|
@@ -23490,7 +23503,7 @@
|
|
|
23490
23503
|
},
|
|
23491
23504
|
{
|
|
23492
23505
|
"name": "size",
|
|
23493
|
-
"type": "\"medium\" | \"large\" | null | undefined",
|
|
23506
|
+
"type": "\"small\" | \"medium\" | \"large\" | null | undefined",
|
|
23494
23507
|
"required": false,
|
|
23495
23508
|
"description": "Badge size — defaults to `medium`.",
|
|
23496
23509
|
"defaultValue": "medium"
|
|
@@ -25589,6 +25602,11 @@
|
|
|
25589
25602
|
"name": "textVariant",
|
|
25590
25603
|
"type": "{ default: string; code: string; }",
|
|
25591
25604
|
"required": false
|
|
25605
|
+
},
|
|
25606
|
+
{
|
|
25607
|
+
"name": "isClickable",
|
|
25608
|
+
"type": "{ true: string; }",
|
|
25609
|
+
"required": false
|
|
25592
25610
|
}
|
|
25593
25611
|
]
|
|
25594
25612
|
}
|
|
@@ -33203,6 +33221,12 @@
|
|
|
33203
33221
|
"type": "{ primary: string; 'primary-alt': string; brand: string; destructive: string; outline: string; info: string; }",
|
|
33204
33222
|
"required": false,
|
|
33205
33223
|
"defaultValue": "primary"
|
|
33224
|
+
},
|
|
33225
|
+
{
|
|
33226
|
+
"name": "size",
|
|
33227
|
+
"type": "{ default: string; small: string; }",
|
|
33228
|
+
"required": false,
|
|
33229
|
+
"defaultValue": "default"
|
|
33206
33230
|
}
|
|
33207
33231
|
],
|
|
33208
33232
|
"variants": [
|
|
@@ -33216,6 +33240,20 @@
|
|
|
33216
33240
|
"outline",
|
|
33217
33241
|
"info"
|
|
33218
33242
|
]
|
|
33243
|
+
},
|
|
33244
|
+
{
|
|
33245
|
+
"name": "size",
|
|
33246
|
+
"options": [
|
|
33247
|
+
"default",
|
|
33248
|
+
"small"
|
|
33249
|
+
]
|
|
33250
|
+
},
|
|
33251
|
+
{
|
|
33252
|
+
"name": "clickable",
|
|
33253
|
+
"options": [
|
|
33254
|
+
"true",
|
|
33255
|
+
"false"
|
|
33256
|
+
]
|
|
33219
33257
|
}
|
|
33220
33258
|
],
|
|
33221
33259
|
"subComponents": [],
|
|
@@ -33224,9 +33262,13 @@
|
|
|
33224
33262
|
"name": "Basic",
|
|
33225
33263
|
"code": "() => <NumericBadge>1</NumericBadge>"
|
|
33226
33264
|
},
|
|
33265
|
+
{
|
|
33266
|
+
"name": "Sizes",
|
|
33267
|
+
"code": "() => (\n <HStack gap={12}>\n <VStack align='end'>\n <div>Small</div>\n <div>Default</div>\n </VStack>\n <VStack>\n <NumericBadge size='small'>1</NumericBadge>\n <NumericBadge size='default'>1</NumericBadge>\n </VStack>\n </HStack>\n)"
|
|
33268
|
+
},
|
|
33227
33269
|
{
|
|
33228
33270
|
"name": "Types",
|
|
33229
|
-
"code": "() => (\n <HStack>\n <NumericBadge type='primary'
|
|
33271
|
+
"code": "() => (\n <HStack gap={12} align='stretch'>\n <VStack align='end'>\n <div>Primary</div>\n <div>Brand</div>\n <div>Destructive</div>\n <div>Outline</div>\n <div>Info</div>\n <div>Primary-alt</div>\n </VStack>\n\n <VStack justify='between'>\n <NumericBadge type='primary' size='default' onClick={() => console.log('meow')}>\n 1\n </NumericBadge>\n <NumericBadge type='brand' size='default' onClick={() => console.log('meow')}>\n 1\n </NumericBadge>\n <NumericBadge type='destructive' size='default' onClick={() => console.log('meow')}>\n 1\n </NumericBadge>\n <NumericBadge type='outline' size='default' onClick={() => console.log('meow')}>\n 1\n </NumericBadge>\n <NumericBadge type='info' size='default' onClick={() => console.log('meow')}>\n 1\n </NumericBadge>\n <div className='inline-flex bg-component-tooltip-bg'>\n <NumericBadge type='primary-alt' size='default' onClick={() => console.log('meow')}>\n 1\n </NumericBadge>\n </div>\n </VStack>\n\n <VStack justify='around'>\n <NumericBadge type='primary' size='small'>\n 1\n </NumericBadge>\n <NumericBadge type='brand' size='small'>\n 1\n </NumericBadge>\n <NumericBadge type='destructive' size='small'>\n 1\n </NumericBadge>\n <NumericBadge type='outline' size='small'>\n 1\n </NumericBadge>\n <NumericBadge type='info' size='small'>\n 1\n </NumericBadge>\n <div className='inline-flex bg-component-tooltip-bg'>\n <NumericBadge type='primary-alt' size='small'>\n 1\n </NumericBadge>\n </div>\n </VStack>\n </HStack>\n)"
|
|
33230
33272
|
}
|
|
33231
33273
|
]
|
|
33232
33274
|
},
|
|
@@ -37954,7 +37996,7 @@
|
|
|
37954
37996
|
},
|
|
37955
37997
|
{
|
|
37956
37998
|
"name": "size",
|
|
37957
|
-
"type": "\"medium\" | \"large\" | null | undefined",
|
|
37999
|
+
"type": "\"small\" | \"medium\" | \"large\" | null | undefined",
|
|
37958
38000
|
"required": false,
|
|
37959
38001
|
"description": "Badge size — defaults to `medium`.",
|
|
37960
38002
|
"defaultValue": "medium"
|
|
@@ -55099,7 +55141,7 @@
|
|
|
55099
55141
|
},
|
|
55100
55142
|
{
|
|
55101
55143
|
"name": "size",
|
|
55102
|
-
"type": "\"medium\" | \"large\" | null | undefined",
|
|
55144
|
+
"type": "\"small\" | \"medium\" | \"large\" | null | undefined",
|
|
55103
55145
|
"required": false,
|
|
55104
55146
|
"defaultValue": "medium"
|
|
55105
55147
|
},
|
package/package.json
CHANGED