@wallarm-org/design-system 0.33.1 → 0.34.1-rc-feature-AS-929-filter-input.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/Attribute/AttributeActionsTarget.d.ts +10 -0
- package/dist/components/Attribute/AttributeActionsTarget.js +9 -3
- package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.d.ts +0 -1
- package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.js +4 -18
- package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.js +9 -1
- package/dist/metadata/components.json +18 -51
- package/package.json +1 -1
|
@@ -2,5 +2,15 @@ import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
|
2
2
|
export interface AttributeActionsTargetProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
ref?: Ref<HTMLDivElement>;
|
|
4
4
|
children: ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* When true, descendants are rendered `inert` — they cannot be clicked,
|
|
7
|
+
* focused, or read by assistive tech as actionable. Any interaction with the
|
|
8
|
+
* target (mouse or keyboard) opens the AttributeActions dropdown.
|
|
9
|
+
*
|
|
10
|
+
* Default `false` — descendants keep their own behavior; clicking them does
|
|
11
|
+
* not open the dropdown. The dropdown opens only when the surrounding target
|
|
12
|
+
* area is clicked.
|
|
13
|
+
*/
|
|
14
|
+
disableNestedInteractive?: boolean;
|
|
5
15
|
}
|
|
6
16
|
export declare const AttributeActionsTarget: FC<AttributeActionsTargetProps>;
|
|
@@ -2,23 +2,25 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { cn } from "../../utils/cn.js";
|
|
3
3
|
import { useTestId } from "../../utils/testId.js";
|
|
4
4
|
import { DropdownMenuTrigger } from "../DropdownMenu/index.js";
|
|
5
|
-
const INTERACTIVE_SELECTOR = 'a[href],button,[role="button"],[role="link"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],[role="checkbox"],[role="switch"],[role="tab"],input,select,textarea,[contenteditable="true"],[aria-haspopup],[data-attribute-actions-skip]';
|
|
5
|
+
const INTERACTIVE_SELECTOR = 'a[href],button,[role="button"],[role="link"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],[role="checkbox"],[role="switch"],[role="tab"],input,select,textarea,[contenteditable="true"],[aria-haspopup],[data-attribute-actions-skip],[data-slot="inline-code-snippet"]';
|
|
6
6
|
const isFromInternalInteractive = (event)=>{
|
|
7
7
|
const target = event.target;
|
|
8
8
|
if (!(target instanceof Element)) return false;
|
|
9
9
|
const match = target.closest(INTERACTIVE_SELECTOR);
|
|
10
10
|
return null !== match && match !== event.currentTarget;
|
|
11
11
|
};
|
|
12
|
-
const AttributeActionsTarget = ({ ref, children, className, onClick, onKeyDown, ...props })=>{
|
|
12
|
+
const AttributeActionsTarget = ({ ref, children, className, onClick, onKeyDown, disableNestedInteractive = false, ...props })=>{
|
|
13
13
|
const testId = useTestId('target');
|
|
14
14
|
const handleClick = (event)=>{
|
|
15
15
|
onClick?.(event);
|
|
16
16
|
if (event.defaultPrevented) return;
|
|
17
|
+
if (disableNestedInteractive) return;
|
|
17
18
|
if (isFromInternalInteractive(event)) event.preventDefault();
|
|
18
19
|
};
|
|
19
20
|
const handleKeyDown = (event)=>{
|
|
20
21
|
onKeyDown?.(event);
|
|
21
22
|
if (event.defaultPrevented) return;
|
|
23
|
+
if (disableNestedInteractive) return;
|
|
22
24
|
if (('Enter' === event.key || ' ' === event.key) && isFromInternalInteractive(event)) event.preventDefault();
|
|
23
25
|
};
|
|
24
26
|
return /*#__PURE__*/ jsx(DropdownMenuTrigger, {
|
|
@@ -31,7 +33,11 @@ const AttributeActionsTarget = ({ ref, children, className, onClick, onKeyDown,
|
|
|
31
33
|
onClick: handleClick,
|
|
32
34
|
onKeyDown: handleKeyDown,
|
|
33
35
|
className: cn('-my-4 flex w-full cursor-pointer items-center rounded-8 px-6 py-4 transition-colors', 'hover:bg-states-primary-hover active:bg-states-primary-pressed', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary', className),
|
|
34
|
-
children:
|
|
36
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
37
|
+
className: "contents",
|
|
38
|
+
inert: disableNestedInteractive || void 0,
|
|
39
|
+
children: children
|
|
40
|
+
})
|
|
35
41
|
})
|
|
36
42
|
});
|
|
37
43
|
};
|
|
@@ -27,6 +27,5 @@ export declare const useChipEditing: ({ conditions, chips, fields, containerRef,
|
|
|
27
27
|
resetSegmentTyping: () => void;
|
|
28
28
|
handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
|
|
29
29
|
clearEditing: () => void;
|
|
30
|
-
cancelSegmentEdit: () => void;
|
|
31
30
|
};
|
|
32
31
|
export {};
|
|
@@ -61,24 +61,12 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
|
|
|
61
61
|
setMenuState,
|
|
62
62
|
upsertCondition
|
|
63
63
|
]);
|
|
64
|
-
const
|
|
64
|
+
const clearEditing = useCallback(()=>{
|
|
65
|
+
setEditingChipId(null);
|
|
65
66
|
setEditingSegment(null);
|
|
66
67
|
setSegmentFilterText('');
|
|
67
68
|
setUserHasTyped(false);
|
|
68
69
|
}, []);
|
|
69
|
-
const clearEditing = useCallback(()=>{
|
|
70
|
-
setEditingChipId(null);
|
|
71
|
-
resetSegmentState();
|
|
72
|
-
}, [
|
|
73
|
-
resetSegmentState
|
|
74
|
-
]);
|
|
75
|
-
const cancelSegmentEdit = useCallback(()=>{
|
|
76
|
-
resetSegmentState();
|
|
77
|
-
setMenuState('closed');
|
|
78
|
-
}, [
|
|
79
|
-
resetSegmentState,
|
|
80
|
-
setMenuState
|
|
81
|
-
]);
|
|
82
70
|
const handleSegmentFilterChange = useCallback((text)=>{
|
|
83
71
|
setSegmentFilterText(text);
|
|
84
72
|
setUserHasTyped(true);
|
|
@@ -97,8 +85,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
|
|
|
97
85
|
setSegmentFilterText: handleSegmentFilterChange,
|
|
98
86
|
resetSegmentTyping,
|
|
99
87
|
handleChipClick,
|
|
100
|
-
clearEditing
|
|
101
|
-
cancelSegmentEdit
|
|
88
|
+
clearEditing
|
|
102
89
|
}), [
|
|
103
90
|
editingChipId,
|
|
104
91
|
editingSegment,
|
|
@@ -107,8 +94,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
|
|
|
107
94
|
handleSegmentFilterChange,
|
|
108
95
|
resetSegmentTyping,
|
|
109
96
|
handleChipClick,
|
|
110
|
-
clearEditing
|
|
111
|
-
cancelSegmentEdit
|
|
97
|
+
clearEditing
|
|
112
98
|
]);
|
|
113
99
|
};
|
|
114
100
|
export { useChipEditing };
|
package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.js
CHANGED
|
@@ -159,6 +159,14 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
|
|
|
159
159
|
selectedField,
|
|
160
160
|
editing
|
|
161
161
|
]);
|
|
162
|
+
const cancelSegmentEdit = useCallback(()=>{
|
|
163
|
+
setSelectedField(null);
|
|
164
|
+
setSelectedOperator(null);
|
|
165
|
+
editing.clearEditing();
|
|
166
|
+
setMenuState('closed');
|
|
167
|
+
}, [
|
|
168
|
+
editing
|
|
169
|
+
]);
|
|
162
170
|
return {
|
|
163
171
|
inputText,
|
|
164
172
|
menuState,
|
|
@@ -197,7 +205,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
|
|
|
197
205
|
segmentFilterText: editing.segmentFilterText,
|
|
198
206
|
segmentMenuFilterText: editing.segmentMenuFilterText,
|
|
199
207
|
handleSegmentFilterChange,
|
|
200
|
-
cancelSegmentEdit
|
|
208
|
+
cancelSegmentEdit,
|
|
201
209
|
handleCustomValueCommit,
|
|
202
210
|
handleCustomAttributeCommit,
|
|
203
211
|
menuRef,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
3
|
-
"generatedAt": "2026-05-
|
|
2
|
+
"version": "0.34.0",
|
|
3
|
+
"generatedAt": "2026-05-11T15:39:31.502Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Alert",
|
|
@@ -2973,6 +2973,13 @@
|
|
|
2973
2973
|
{
|
|
2974
2974
|
"name": "AttributeActionsTarget",
|
|
2975
2975
|
"props": [
|
|
2976
|
+
{
|
|
2977
|
+
"name": "disableNestedInteractive",
|
|
2978
|
+
"type": "boolean | undefined",
|
|
2979
|
+
"required": false,
|
|
2980
|
+
"description": "When true, descendants are rendered `inert` — they cannot be clicked,\nfocused, or read by assistive tech as actionable. Any interaction with the\ntarget (mouse or keyboard) opens the AttributeActions dropdown.\n\nDefault `false` — descendants keep their own behavior; clicking them does\nnot open the dropdown. The dropdown opens only when the surrounding target\narea is clicked.",
|
|
2981
|
+
"defaultValue": "false"
|
|
2982
|
+
},
|
|
2976
2983
|
{
|
|
2977
2984
|
"name": "defaultChecked",
|
|
2978
2985
|
"type": "boolean | undefined",
|
|
@@ -4638,12 +4645,8 @@
|
|
|
4638
4645
|
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>\n Created at\n <AttributeLabelDescription>\n The time when the request was first received\n </AttributeLabelDescription>\n </AttributeLabel>\n <AttributeValue>\n <Text size='sm'>April 9, 2026, 14:32</Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4639
4646
|
},
|
|
4640
4647
|
{
|
|
4641
|
-
"name": "
|
|
4642
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>\n Request ID\n <AttributeLabelInfo>Unique identifier assigned to each incoming request</AttributeLabelInfo>\n </AttributeLabel>\n <AttributeValue>\n <Text size='sm'>abc-123-def-456</Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4643
|
-
},
|
|
4644
|
-
{
|
|
4645
|
-
"name": "WithInfoLeft",
|
|
4646
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>\n <AttributeLabelInfo>Unique identifier assigned to each incoming request</AttributeLabelInfo>\n Request ID\n </AttributeLabel>\n <AttributeValue>\n <Text size='sm'>abc-123-def-456</Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4648
|
+
"name": "WithInfo",
|
|
4649
|
+
"code": "() => (\n <div className='w-[400px] flex flex-col gap-16'>\n <Attribute>\n <AttributeLabel>\n Request ID\n <AttributeLabelInfo>Unique identifier assigned to each incoming request</AttributeLabelInfo>\n </AttributeLabel>\n <AttributeValue>\n <Text size='sm'>abc-123-def-456</Text>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>\n <AttributeLabelInfo>Unique identifier assigned to each incoming request</AttributeLabelInfo>\n Request ID\n </AttributeLabel>\n <AttributeValue>\n <Text size='sm'>abc-123-def-456</Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4647
4650
|
},
|
|
4648
4651
|
{
|
|
4649
4652
|
"name": "WithLink",
|
|
@@ -4658,49 +4661,21 @@
|
|
|
4658
4661
|
"name": "Loading",
|
|
4659
4662
|
"code": "() => (\n <div className='w-[400px] flex flex-col gap-16'>\n <Attribute loading>\n <AttributeLabel>Created at</AttributeLabel>\n <AttributeValue />\n </Attribute>\n <Attribute loading>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue />\n </Attribute>\n </div>\n)"
|
|
4660
4663
|
},
|
|
4661
|
-
{
|
|
4662
|
-
"name": "WithBadge",
|
|
4663
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='green'>Active</Badge>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4664
|
-
},
|
|
4665
|
-
{
|
|
4666
|
-
"name": "WithTags",
|
|
4667
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>Tags</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['production', 'us-east-1', 'critical', 'tier-1', 'public', 'monitored']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4668
|
-
},
|
|
4669
|
-
{
|
|
4670
|
-
"name": "WithCodeSnippet",
|
|
4671
|
-
"code": "() => (\n <div className='w-[400px] flex flex-col gap-16'>\n <Attribute>\n <AttributeLabel>Payload (inline)</AttributeLabel>\n <AttributeValue>\n <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n </AttributeValue>\n </Attribute>\n <Attribute>\n <AttributeLabel>Payload (code)</AttributeLabel>\n <AttributeValue>\n <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4672
|
-
},
|
|
4673
|
-
{
|
|
4674
|
-
"name": "WithLink_Value",
|
|
4675
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>Documentation</AttributeLabel>\n <AttributeValue>\n <Link href='#' size='md'>\n View full report\n </Link>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4676
|
-
},
|
|
4677
|
-
{
|
|
4678
|
-
"name": "WithDateTime",
|
|
4679
|
-
"code": "() => (\n <div className='w-[400px] flex flex-col gap-16'>\n <Attribute>\n <AttributeLabel>Created at (relative)</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-02T14:03:00Z' />\n </AttributeValue>\n </Attribute>\n <Attribute>\n <AttributeLabel>Created at (absolute)</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4680
|
-
},
|
|
4681
|
-
{
|
|
4682
|
-
"name": "WithIP",
|
|
4683
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4684
|
-
},
|
|
4685
4664
|
{
|
|
4686
4665
|
"name": "Composition",
|
|
4687
|
-
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Sessions</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>3 sessions</Text>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={[\n 'artem@acme.com',\n 'uxd@acme.com',\n 'ops@acme.com',\n 'security@acme.com',\n 'admin@acme.com',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <IpList>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>AWS</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='NL' />\n <IpAddress>10.0.0.1</IpAddress>\n </Ip>\n <Ip>\n <IpCountry code='JP' />\n <IpAddress>192.168.1.1</IpAddress>\n </Ip>\n </IpList>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4666
|
+
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Sessions</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>3 sessions</Text>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={[\n 'artem@acme.com',\n 'uxd@acme.com',\n 'ops@acme.com',\n 'security@acme.com',\n 'admin@acme.com',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <IpList>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>AWS</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='NL' />\n <IpAddress>10.0.0.1</IpAddress>\n </Ip>\n <Ip>\n <IpCountry code='JP' />\n <IpAddress>192.168.1.1</IpAddress>\n </Ip>\n </IpList>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Created at</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Documentation</AttributeLabel>\n <AttributeValue>\n <Link href='#' size='md'>\n View full report\n </Link>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Payload (inline)</AttributeLabel>\n <AttributeValue>\n <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Payload (code)</AttributeLabel>\n <AttributeValue>\n <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4688
4667
|
},
|
|
4689
4668
|
{
|
|
4690
4669
|
"name": "WithActions",
|
|
4691
|
-
"code": "() => (\n <div className='
|
|
4670
|
+
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <AttributeActions data-testid='attribute-with-actions'>\n <AttributeActionsTarget>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <OverflowList\n className='gap-4'\n items={[\n 'XSS',\n 'BOLA',\n 'SQL Injection',\n 'Scanner',\n 'CSRF',\n 'XXE',\n 'RCE',\n 'LFI',\n 'IDOR',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Sessions</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Text size='sm'>3 sessions</Text>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <OverflowList\n className='gap-4'\n items={[\n 'artem@acme.com',\n 'uxd@acme.com',\n 'ops@acme.com',\n 'security@acme.com',\n 'admin@acme.com',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <IpList>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>AWS</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='NL' />\n <IpAddress>10.0.0.1</IpAddress>\n </Ip>\n <Ip>\n <IpCountry code='JP' />\n <IpAddress>192.168.1.1</IpAddress>\n </Ip>\n </IpList>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Created at</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Documentation</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Link href='#' size='md'>\n View full report\n </Link>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Payload (inline)</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Payload (code)</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4692
4671
|
},
|
|
4693
4672
|
{
|
|
4694
4673
|
"name": "Horizontal",
|
|
4695
4674
|
"code": "() => (\n <div className='w-[400px]'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4696
4675
|
},
|
|
4697
4676
|
{
|
|
4698
|
-
"name": "
|
|
4699
|
-
"code": "() => (\n <div className='w-[500px] flex flex-col gap-8'>\n <Attribute orientation='horizontal'>\n <AttributeLabel width={256}>Short</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>Fits in 256px label cell</Text>\n </AttributeValue>\n </Attribute>\n <Attribute orientation='horizontal'>\n <AttributeLabel width={256}>\n This label text is much longer than 256 pixels and must be truncated\n </AttributeLabel>\n <AttributeValue>\n <Text size='sm'>Value</Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4700
|
-
},
|
|
4701
|
-
{
|
|
4702
|
-
"name": "HorizontalValueTruncation",
|
|
4703
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <Text size='sm' truncate>\n artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com\n </Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4677
|
+
"name": "HorizontalTruncation",
|
|
4678
|
+
"code": "() => (\n <div className='w-[500px] flex flex-col gap-8'>\n <Attribute orientation='horizontal'>\n <AttributeLabel width={256}>Short</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>Fits in 256px label cell</Text>\n </AttributeValue>\n </Attribute>\n <Attribute orientation='horizontal'>\n <AttributeLabel width={256}>\n This label text is much longer than 256 pixels and must be truncated\n </AttributeLabel>\n <AttributeValue>\n <Text size='sm'>Value</Text>\n </AttributeValue>\n </Attribute>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <Text size='sm' truncate>\n artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com\n </Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4704
4679
|
},
|
|
4705
4680
|
{
|
|
4706
4681
|
"name": "HorizontalComposition",
|
|
@@ -4717,19 +4692,11 @@
|
|
|
4717
4692
|
},
|
|
4718
4693
|
{
|
|
4719
4694
|
"name": "HorizontalWithActions",
|
|
4720
|
-
"code": "() => (\n <div className='w-[400px] flex flex-col gap-8'
|
|
4721
|
-
},
|
|
4722
|
-
{
|
|
4723
|
-
"name": "HorizontalWithActionsBadge",
|
|
4724
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute orientation='horizontal' data-testid='attr-badge'>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeActionsTarget>\n <AttributeActionsContent>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Filter />\n Investigate by this value\n </AttributeActionsItem>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Copy />\n Copy value\n </AttributeActionsItem>\n </AttributeActionsContent>\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4725
|
-
},
|
|
4726
|
-
{
|
|
4727
|
-
"name": "HorizontalWithActionsTags",
|
|
4728
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute orientation='horizontal' data-testid='attr-tags'>\n <AttributeLabel>Tags</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <OverflowList\n className='gap-4'\n items={['production', 'us-east-1', 'critical', 'tier-1', 'public', 'monitored']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeActionsTarget>\n <AttributeActionsContent>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Filter />\n Investigate by this value\n </AttributeActionsItem>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Copy />\n Copy value\n </AttributeActionsItem>\n </AttributeActionsContent>\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4695
|
+
"code": "() => (\n <div className='w-[400px] flex flex-col gap-8'>{renderActionsAttributes(false)}</div>\n)"
|
|
4729
4696
|
},
|
|
4730
4697
|
{
|
|
4731
|
-
"name": "
|
|
4732
|
-
"code": "() => (\n <div className='w-[400px]
|
|
4698
|
+
"name": "HorizontalWithActionsMenuOnly",
|
|
4699
|
+
"code": "() => (\n <div className='w-[400px] flex flex-col gap-8'>{renderActionsAttributes(true)}</div>\n)"
|
|
4733
4700
|
}
|
|
4734
4701
|
]
|
|
4735
4702
|
},
|
package/package.json
CHANGED