@wallarm-org/design-system 0.33.0 → 0.33.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.js +21 -2
- package/dist/components/Badge/Badge.js +3 -3
- package/dist/components/DropdownMenu/DropdownMenu.js +27 -24
- package/dist/components/Popover/Popover.js +4 -2
- package/dist/components/Popover/PopoverContent.d.ts +1 -0
- package/dist/components/Popover/PopoverContent.js +3 -2
- package/dist/components/Tag/Tag.js +7 -5
- package/dist/metadata/components.json +15 -3
- package/dist/utils/testId.d.ts +7 -3
- package/dist/utils/testId.js +2 -1
- package/package.json +1 -1
|
@@ -2,8 +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
|
|
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]';
|
|
6
|
+
const isFromInternalInteractive = (event)=>{
|
|
7
|
+
const target = event.target;
|
|
8
|
+
if (!(target instanceof Element)) return false;
|
|
9
|
+
const match = target.closest(INTERACTIVE_SELECTOR);
|
|
10
|
+
return null !== match && match !== event.currentTarget;
|
|
11
|
+
};
|
|
12
|
+
const AttributeActionsTarget = ({ ref, children, className, onClick, onKeyDown, ...props })=>{
|
|
6
13
|
const testId = useTestId('target');
|
|
14
|
+
const handleClick = (event)=>{
|
|
15
|
+
onClick?.(event);
|
|
16
|
+
if (event.defaultPrevented) return;
|
|
17
|
+
if (isFromInternalInteractive(event)) event.preventDefault();
|
|
18
|
+
};
|
|
19
|
+
const handleKeyDown = (event)=>{
|
|
20
|
+
onKeyDown?.(event);
|
|
21
|
+
if (event.defaultPrevented) return;
|
|
22
|
+
if (('Enter' === event.key || ' ' === event.key) && isFromInternalInteractive(event)) event.preventDefault();
|
|
23
|
+
};
|
|
7
24
|
return /*#__PURE__*/ jsx(DropdownMenuTrigger, {
|
|
8
25
|
asChild: true,
|
|
9
26
|
children: /*#__PURE__*/ jsx("div", {
|
|
@@ -11,7 +28,9 @@ const AttributeActionsTarget = ({ ref, children, className, ...props })=>{
|
|
|
11
28
|
ref: ref,
|
|
12
29
|
"data-testid": testId,
|
|
13
30
|
"data-slot": "attribute-actions-target",
|
|
14
|
-
|
|
31
|
+
onClick: handleClick,
|
|
32
|
+
onKeyDown: handleKeyDown,
|
|
33
|
+
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),
|
|
15
34
|
children: children
|
|
16
35
|
})
|
|
17
36
|
});
|
|
@@ -13,10 +13,10 @@ const Badge = ({ ref, className, variant = 'default', size = 'medium', type = 's
|
|
|
13
13
|
textVariant,
|
|
14
14
|
isIconOnly: isIconOnly(children)
|
|
15
15
|
}), className);
|
|
16
|
-
const handleClick = (event)=>{
|
|
16
|
+
const handleClick = onClick ? (event)=>{
|
|
17
17
|
event.stopPropagation();
|
|
18
|
-
onClick
|
|
19
|
-
};
|
|
18
|
+
onClick(event);
|
|
19
|
+
} : void 0;
|
|
20
20
|
const Comp = asChild ? Slot : 'div';
|
|
21
21
|
return /*#__PURE__*/ jsx(Comp, {
|
|
22
22
|
...props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { Menu } from "@ark-ui/react/menu";
|
|
4
|
-
import { TestIdProvider } from "../../utils/testId.js";
|
|
4
|
+
import { TestIdProvider, useTestId } from "../../utils/testId.js";
|
|
5
5
|
import { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
6
6
|
const ROOT_POSITIONING = {
|
|
7
7
|
placement: 'bottom-start',
|
|
@@ -15,7 +15,9 @@ const SUB_POSITIONING = {
|
|
|
15
15
|
crossAxis: -9
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
|
-
const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint, positioning, highlightedValue, onHighlightChange, closeOnSelect, 'data-testid':
|
|
18
|
+
const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint, positioning, highlightedValue, onHighlightChange, closeOnSelect, 'data-testid': testIdProp, ...props })=>{
|
|
19
|
+
const inheritedTestId = useTestId();
|
|
20
|
+
const testId = testIdProp ?? inheritedTestId;
|
|
19
21
|
const parent = useDropdownMenuContext();
|
|
20
22
|
const isNested = null !== parent;
|
|
21
23
|
const defaultPositioning = isNested ? SUB_POSITIONING : ROOT_POSITIONING;
|
|
@@ -25,32 +27,33 @@ const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint,
|
|
|
25
27
|
const ctx = useMemo(()=>({
|
|
26
28
|
isNested: true
|
|
27
29
|
}), []);
|
|
30
|
+
const root = /*#__PURE__*/ jsx(Menu.Root, {
|
|
31
|
+
...props,
|
|
32
|
+
positioning: positioning ?? defaultPositioning,
|
|
33
|
+
...null != anchorPoint && {
|
|
34
|
+
anchorPoint
|
|
35
|
+
},
|
|
36
|
+
...null != highlightedValue && {
|
|
37
|
+
highlightedValue
|
|
38
|
+
},
|
|
39
|
+
...null != closeOnSelect && {
|
|
40
|
+
closeOnSelect
|
|
41
|
+
},
|
|
42
|
+
...null != onHighlightChange && {
|
|
43
|
+
onHighlightChange
|
|
44
|
+
},
|
|
45
|
+
open: open,
|
|
46
|
+
defaultOpen: defaultOpen,
|
|
47
|
+
onOpenChange: handleOpenChange,
|
|
48
|
+
lazyMount: true,
|
|
49
|
+
unmountOnExit: true,
|
|
50
|
+
children: children
|
|
51
|
+
});
|
|
28
52
|
return /*#__PURE__*/ jsx(DropdownMenuContext, {
|
|
29
53
|
value: ctx,
|
|
30
54
|
children: /*#__PURE__*/ jsx(TestIdProvider, {
|
|
31
55
|
value: testId,
|
|
32
|
-
children:
|
|
33
|
-
...props,
|
|
34
|
-
positioning: positioning ?? defaultPositioning,
|
|
35
|
-
...null != anchorPoint && {
|
|
36
|
-
anchorPoint
|
|
37
|
-
},
|
|
38
|
-
...null != highlightedValue && {
|
|
39
|
-
highlightedValue
|
|
40
|
-
},
|
|
41
|
-
...null != closeOnSelect && {
|
|
42
|
-
closeOnSelect
|
|
43
|
-
},
|
|
44
|
-
...null != onHighlightChange && {
|
|
45
|
-
onHighlightChange
|
|
46
|
-
},
|
|
47
|
-
open: open,
|
|
48
|
-
defaultOpen: defaultOpen,
|
|
49
|
-
onOpenChange: handleOpenChange,
|
|
50
|
-
lazyMount: true,
|
|
51
|
-
unmountOnExit: true,
|
|
52
|
-
children: children
|
|
53
|
-
})
|
|
56
|
+
children: root
|
|
54
57
|
})
|
|
55
58
|
});
|
|
56
59
|
};
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Popover } from "@ark-ui/react";
|
|
3
|
-
import { TestIdProvider } from "../../utils/testId.js";
|
|
3
|
+
import { TestIdProvider, useTestId } from "../../utils/testId.js";
|
|
4
4
|
const POPOVER_POSITIONING_DEFAULT = {
|
|
5
5
|
gutter: 8,
|
|
6
6
|
offset: {
|
|
7
7
|
mainAxis: 12
|
|
8
8
|
}
|
|
9
9
|
};
|
|
10
|
-
const Popover_Popover = ({ children, open, onOpenChange, 'data-testid':
|
|
10
|
+
const Popover_Popover = ({ children, open, onOpenChange, 'data-testid': testIdProp })=>{
|
|
11
|
+
const inheritedTestId = useTestId();
|
|
12
|
+
const testId = testIdProp ?? inheritedTestId;
|
|
11
13
|
const handleOpenChange = ({ open })=>{
|
|
12
14
|
onOpenChange?.(open);
|
|
13
15
|
};
|
|
@@ -6,8 +6,9 @@ import { cn } from "../../utils/cn.js";
|
|
|
6
6
|
import { useTestId } from "../../utils/testId.js";
|
|
7
7
|
import { ScrollArea, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
|
|
8
8
|
import { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_HEIGHT, POPOVER_MIN_WIDTH } from "./constants.js";
|
|
9
|
-
const PopoverContent = ({ children, minHeight = POPOVER_MIN_HEIGHT, maxHeight = POPOVER_MAX_HEIGHT, minWidth = POPOVER_MIN_WIDTH, maxWidth = POPOVER_MAX_WIDTH })=>{
|
|
10
|
-
const
|
|
9
|
+
const PopoverContent = ({ children, minHeight = POPOVER_MIN_HEIGHT, maxHeight = POPOVER_MAX_HEIGHT, minWidth = POPOVER_MIN_WIDTH, maxWidth = POPOVER_MAX_WIDTH, 'data-testid': testIdProp })=>{
|
|
10
|
+
const contextTestId = useTestId('content');
|
|
11
|
+
const testId = testIdProp ?? contextTestId;
|
|
11
12
|
const { getContentProps } = usePopoverContext();
|
|
12
13
|
const { id } = getContentProps();
|
|
13
14
|
const style = useMemo(()=>({
|
|
@@ -2,7 +2,7 @@ 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
|
-
import { TestIdProvider } from "../../utils/testId.js";
|
|
5
|
+
import { TestIdProvider, useTestId } from "../../utils/testId.js";
|
|
6
6
|
import { badgeVariants } from "../Badge/index.js";
|
|
7
7
|
const tagVariants = cva(cn('inline-flex items-center', 'rounded-8 border border-border-primary overlay', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary', 'transition-colors cursor-pointer select-none', '[&_[data-slot=tag-close]]:cursor-pointer'), {
|
|
8
8
|
variants: {
|
|
@@ -12,12 +12,14 @@ const tagVariants = cva(cn('inline-flex items-center', 'rounded-8 border border-
|
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
});
|
|
15
|
-
const Tag = ({ size = 'medium', disabled = false, asChild = false, children, onClick, 'data-testid':
|
|
15
|
+
const Tag = ({ size = 'medium', disabled = false, asChild = false, children, onClick, 'data-testid': testIdProp, ...props })=>{
|
|
16
|
+
const inheritedTestId = useTestId();
|
|
17
|
+
const testId = testIdProp ?? inheritedTestId;
|
|
16
18
|
const Comp = asChild ? Slot : 'div';
|
|
17
|
-
const handleClick = (event)=>{
|
|
19
|
+
const handleClick = onClick ? (event)=>{
|
|
18
20
|
event.stopPropagation();
|
|
19
|
-
onClick
|
|
20
|
-
};
|
|
21
|
+
onClick(event);
|
|
22
|
+
} : void 0;
|
|
21
23
|
return /*#__PURE__*/ jsx(TestIdProvider, {
|
|
22
24
|
value: testId,
|
|
23
25
|
children: /*#__PURE__*/ jsx(Comp, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
3
|
-
"generatedAt": "2026-05-
|
|
2
|
+
"version": "0.33.0",
|
|
3
|
+
"generatedAt": "2026-05-05T12:45:28.129Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Alert",
|
|
@@ -4717,7 +4717,19 @@
|
|
|
4717
4717
|
},
|
|
4718
4718
|
{
|
|
4719
4719
|
"name": "HorizontalWithActions",
|
|
4720
|
-
"code": "() => (\n <div className='w-[400px] flex flex-col gap-8'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <AttributeActions data-testid='attribute-horizontal-with-actions'>\n <AttributeActionsTarget>\n <Text size='sm'>142.198.167.52</Text>\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\n <Attribute orientation='horizontal'>\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)"
|
|
4720
|
+
"code": "() => (\n <div className='w-[400px] flex flex-col gap-8'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <AttributeActions data-testid='attribute-horizontal-with-actions'>\n <AttributeActionsTarget>\n <Text size='sm'>142.198.167.52</Text>\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\n <Attribute orientation='horizontal'>\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\n <Attribute orientation='horizontal'>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <IpList type='horizontal'>\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 <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\n <Attribute orientation='horizontal'>\n <AttributeLabel>Payload</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\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\n <Attribute orientation='horizontal'>\n <AttributeLabel>Documentation</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Link href='#' size='md'>\n View full report\n </Link>\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\n <Attribute orientation='horizontal'>\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)"
|
|
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)"
|
|
4729
|
+
},
|
|
4730
|
+
{
|
|
4731
|
+
"name": "HorizontalWithActionsIpOverflow",
|
|
4732
|
+
"code": "() => (\n <div className='w-[400px]'>\n <Attribute orientation='horizontal' data-testid='attr-ip-overflow'>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <IpList type='horizontal'>\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 <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)"
|
|
4721
4733
|
}
|
|
4722
4734
|
]
|
|
4723
4735
|
},
|
package/dist/utils/testId.d.ts
CHANGED
|
@@ -27,12 +27,16 @@ export interface TestableProps {
|
|
|
27
27
|
*/
|
|
28
28
|
export declare const TestIdProvider: import("react").Provider<string | undefined>;
|
|
29
29
|
/**
|
|
30
|
-
* Returns a derived `data-testid` for a sub-component slot
|
|
30
|
+
* Returns a derived `data-testid` for a sub-component slot, or the
|
|
31
|
+
* cascade base itself when no slot is provided.
|
|
31
32
|
*
|
|
32
|
-
*
|
|
33
|
+
* - `useTestId('close')` → `"{base}--close"` (sub-component pattern)
|
|
34
|
+
* - `useTestId()` → `"{base}"` (transparent wrapper pattern — useful for
|
|
35
|
+
* compound roots that pass through their parent's cascade without
|
|
36
|
+
* adding their own slot segment)
|
|
33
37
|
*
|
|
34
38
|
* Returns `undefined` when no parent `TestIdProvider` exists or
|
|
35
39
|
* when no `data-testid` was passed to the root component,
|
|
36
40
|
* keeping the DOM clean.
|
|
37
41
|
*/
|
|
38
|
-
export declare function useTestId(slot
|
|
42
|
+
export declare function useTestId(slot?: string): string | undefined;
|
package/dist/utils/testId.js
CHANGED
|
@@ -3,6 +3,7 @@ const TestIdContext = createContext(void 0);
|
|
|
3
3
|
const TestIdProvider = TestIdContext.Provider;
|
|
4
4
|
function useTestId(slot) {
|
|
5
5
|
const base = useContext(TestIdContext);
|
|
6
|
-
|
|
6
|
+
if (!base) return;
|
|
7
|
+
return slot ? `${base}--${slot}` : base;
|
|
7
8
|
}
|
|
8
9
|
export { TestIdProvider, useTestId };
|