@wallarm-org/design-system 0.51.1-rc-fix-table-virtualization-scroll-loop.1 → 0.51.1-rc-fix-tests.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/AppShell/story-content/_storyAccountDropdown.js +0 -1
- package/dist/components/AppShell/story-content/_storyWallarmLogo.d.ts +1 -0
- package/dist/components/AppShell/story-content/_storyWallarmLogo.js +21 -0
- package/dist/components/AppShell/story-content/index.d.ts +1 -0
- package/dist/components/AppShell/story-content/index.js +2 -1
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Card/CardFooter.js +1 -1
- package/dist/components/Card/classes.js +1 -1
- package/dist/components/DropdownMenu/DropdownMenuTrigger.js +15 -3
- package/dist/components/NavPanel/NavPanelHeader.js +1 -1
- package/dist/components/NavRail/NavRailBody.js +1 -1
- package/dist/components/RemoteShell/HeaderActions.js +1 -0
- package/dist/components/RemoteShell/NavPanelContent.js +1 -1
- package/dist/components/SegmentedControl/classes.js +1 -1
- package/dist/components/Stack/Stack.d.ts +1 -1
- package/dist/components/Stack/Stack.js +2 -2
- package/dist/components/Table/TableBody/TableBodyVirtualizedContainer.js +0 -1
- package/dist/components/Table/TableBody/TableBodyVirtualizedWindow.js +0 -1
- package/dist/components/Text/Text.d.ts +2 -0
- package/dist/components/Text/Text.js +13 -2
- package/dist/components/TopHeader/TopHeader.js +1 -1
- package/dist/components/TopHeader/TopHeaderLogo.js +1 -1
- package/dist/metadata/components.json +82 -57
- package/dist/theme/semantic.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const WallarmLogo: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
const WallarmLogo = ()=>/*#__PURE__*/ jsxs("svg", {
|
|
3
|
+
width: "89",
|
|
4
|
+
height: "16",
|
|
5
|
+
viewBox: "0 0 89 16",
|
|
6
|
+
fill: "none",
|
|
7
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
8
|
+
children: [
|
|
9
|
+
/*#__PURE__*/ jsx("path", {
|
|
10
|
+
fillRule: "evenodd",
|
|
11
|
+
clipRule: "evenodd",
|
|
12
|
+
d: "M33.9026 4.87835H35.5876L37.698 11.2096L39.383 4.87835H41.4934L38.5405 14.1625H36.8555L34.7451 7.83127L32.6346 14.1625H30.9496L27.9884 4.87835H30.0988L31.7838 11.2096L33.8942 4.87835H33.9026ZM44.9886 12.7862C46.3733 12.7862 47.4076 12.0104 47.4076 10.8676V10.292C46.8738 10.0835 46.1314 9.92502 45.3139 9.92502C44.0042 9.92502 43.2201 10.4589 43.2201 11.3931V11.4265C43.2201 12.294 43.9959 12.7778 44.9802 12.7778L44.9886 12.7862ZM42.7613 5.35382C43.5371 5.07855 44.388 4.90337 45.5057 4.90337C48.2001 4.90337 49.518 6.24637 49.518 8.68212V14.1709H47.4076V13.0531C46.782 13.7955 45.8728 14.3627 44.4881 14.3627C42.7614 14.3627 41.2432 13.3784 41.2432 11.5433V11.5099C41.2432 9.5413 42.8197 8.57368 44.9385 8.57368C46.0479 8.57368 46.6986 8.73217 47.4076 8.95739V8.73217C47.4076 7.47258 46.6652 6.78023 45.2138 6.78023C44.2712 6.78023 43.5204 6.98043 42.7613 7.28073V5.3705V5.35382ZM50.786 14.1625V1.5H52.8964V14.1625H50.786ZM54.1643 14.1625V1.5H56.2747L56.3164 14.1625H54.1643ZM61.0378 12.7862C62.4225 12.7862 63.4569 12.0104 63.4569 10.8676V10.292C62.923 10.0835 62.1806 9.92502 61.3631 9.92502C60.0535 9.92502 59.2694 10.4589 59.2694 11.3931V11.4265C59.2694 12.294 60.0451 12.7778 61.0295 12.7778L61.0378 12.7862ZM58.8106 5.35382C59.578 5.07855 60.4372 4.90337 61.555 4.90337C64.2493 4.90337 65.5589 6.24637 65.5589 8.68212V14.1709H63.4485V13.0531C62.8229 13.7955 61.9137 14.3627 60.529 14.3627C58.8022 14.3627 57.2841 13.3784 57.2841 11.5433V11.5099C57.2841 9.5413 58.8606 8.57368 60.9794 8.57368C62.0888 8.57368 62.7395 8.73217 63.4485 8.95739V8.73217C63.4485 7.47258 62.7061 6.78023 61.2547 6.78023C60.3121 6.78023 59.5613 6.98043 58.8022 7.28073V5.3705L58.8106 5.35382ZM66.8269 14.1625V4.87835H68.9373V6.93872C69.5045 5.5707 70.5389 4.63644 72.1405 4.71152V6.92204H72.0237C70.1885 6.92204 68.9373 8.11489 68.9373 10.534V14.1709H66.8269V14.1625ZM87.0969 8.18162V14.1709H84.9865V8.94071C84.9865 7.48927 84.3359 6.58838 83.1597 6.58838C81.9835 6.58838 81.1911 7.47258 81.1911 8.94071V14.1709H79.0807V8.80724C79.0807 7.38917 78.43 6.58838 77.2705 6.58838C76.1111 6.58838 75.2769 7.52263 75.2769 8.94071V14.1709H73.1665V4.87835H75.2769V6.26305C75.8692 5.45392 76.695 4.68649 78.0964 4.68649C79.406 4.68649 80.3236 5.32879 80.8074 6.29642C81.5498 5.32879 82.5174 4.68649 83.9021 4.68649C85.8874 4.68649 87.0969 5.94607 87.0969 8.18162Z",
|
|
13
|
+
fill: "currentColor"
|
|
14
|
+
}),
|
|
15
|
+
/*#__PURE__*/ jsx("path", {
|
|
16
|
+
d: "M0.849998 6.83954L9.8954 3V8.4134L16.4618 5.62599V9.59236L21.2757 7.54864V10.4542L16.4618 12.498V10.754L9.8954 13.5414V11.1662L0.849998 15V6.83954Z",
|
|
17
|
+
fill: "#FF441C"
|
|
18
|
+
})
|
|
19
|
+
]
|
|
20
|
+
});
|
|
21
|
+
export { WallarmLogo };
|
|
@@ -5,3 +5,4 @@ export { deriveProduct, navigateToProduct } from './_storyLib';
|
|
|
5
5
|
export { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig, } from './_storyNavConfigs';
|
|
6
6
|
export { QuickHelpDropdown } from './_storyQuickHelpDropdown';
|
|
7
7
|
export { RecentDropdown } from './_storyRecentDropdown';
|
|
8
|
+
export { WallarmLogo } from './_storyWallarmLogo';
|
|
@@ -5,4 +5,5 @@ import { deriveProduct, navigateToProduct } from "./_storyLib.js";
|
|
|
5
5
|
import { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig } from "./_storyNavConfigs.js";
|
|
6
6
|
import { QuickHelpDropdown } from "./_storyQuickHelpDropdown.js";
|
|
7
7
|
import { RecentDropdown } from "./_storyRecentDropdown.js";
|
|
8
|
-
|
|
8
|
+
import { WallarmLogo } from "./_storyWallarmLogo.js";
|
|
9
|
+
export { AccountDropdown, HomeContent, QuickHelpDropdown, RecentDropdown, RemoteForProduct, WallarmLogo, aiHypervisorNavConfig, deriveProduct, edgeNavConfig, infraDiscoveryNavConfig, navigateToProduct, securityTestingNavConfig, settingsNavConfig };
|
|
@@ -41,7 +41,7 @@ const buttonVariants = cva('', {
|
|
|
41
41
|
{
|
|
42
42
|
color: 'neutral',
|
|
43
43
|
variant: 'ghost',
|
|
44
|
-
className: 'bg-transparent border-1 border-transparent hover:not-disabled:bg-states-primary-hover active:not-disabled:bg-states-primary-pressed focus-visible:border-border-primary data-[focus=true]:border-border-primary'
|
|
44
|
+
className: 'bg-transparent border-1 border-transparent hover:not-disabled:bg-states-primary-hover active:not-disabled:bg-states-primary-pressed focus-visible:border-border-primary data-[focus=true]:border-border-primary data-[state=open]:bg-states-primary-hover data-[state=open]:ring-0 data-[state=open]:border-transparent'
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
color: 'neutral',
|
|
@@ -10,7 +10,7 @@ const CardFooter = ({ ref, asChild = false, className, children, ...props })=>{
|
|
|
10
10
|
ref: ref,
|
|
11
11
|
"data-slot": "card-footer",
|
|
12
12
|
"data-testid": testId,
|
|
13
|
-
className: cn('mt-auto flex items-center justify-end gap-
|
|
13
|
+
className: cn('mt-auto flex items-center justify-end gap-12 px-16', className),
|
|
14
14
|
children: children
|
|
15
15
|
});
|
|
16
16
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cva } from "class-variance-authority";
|
|
2
|
-
const cardVariants = cva('flex flex-col gap-8 rounded-8 border-1 shadow-sm min-w-[
|
|
2
|
+
const cardVariants = cva('flex flex-col gap-8 rounded-8 border-1 shadow-sm min-w-[120px] overflow-hidden py-16 transition-colors duration-200 h-full', {
|
|
3
3
|
variants: {
|
|
4
4
|
color: {
|
|
5
5
|
primary: 'bg-bg-surface-1 border-border-primary-light',
|
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { cloneElement, isValidElement } from "react";
|
|
3
|
+
import { Menu, useMenuContext } from "@ark-ui/react/menu";
|
|
3
4
|
import { useTestId } from "../../utils/testId.js";
|
|
4
|
-
const
|
|
5
|
+
const TriggerStateInjector = ({ children })=>{
|
|
6
|
+
const menu = useMenuContext();
|
|
7
|
+
const state = menu.open ? 'open' : 'closed';
|
|
8
|
+
if (/*#__PURE__*/ isValidElement(children)) return /*#__PURE__*/ cloneElement(children, {
|
|
9
|
+
'data-state': state
|
|
10
|
+
});
|
|
11
|
+
return children;
|
|
12
|
+
};
|
|
13
|
+
const DropdownMenuTrigger = ({ variant = 'default', inset = false, asChild, children, ...props })=>{
|
|
5
14
|
const testId = useTestId('trigger');
|
|
6
15
|
return /*#__PURE__*/ jsx(Menu.Trigger, {
|
|
7
16
|
...props,
|
|
17
|
+
asChild: asChild,
|
|
8
18
|
"data-testid": testId,
|
|
9
|
-
children: children
|
|
19
|
+
children: asChild ? children : /*#__PURE__*/ jsx(TriggerStateInjector, {
|
|
20
|
+
children: children
|
|
21
|
+
})
|
|
10
22
|
});
|
|
11
23
|
};
|
|
12
24
|
DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
|
|
@@ -9,7 +9,7 @@ const NavPanelHeader = ({ ref, className, children, ...props })=>{
|
|
|
9
9
|
ref: ref,
|
|
10
10
|
"data-slot": "nav-panel-header",
|
|
11
11
|
"data-testid": testId,
|
|
12
|
-
className: cn('sticky top-0 z-10 flex shrink-0 items-center p-4 bg-bg-surface-2', className),
|
|
12
|
+
className: cn('sticky top-0 z-10 flex shrink-0 items-center p-4 pt-2 bg-bg-surface-2', className),
|
|
13
13
|
children: /*#__PURE__*/ jsx(Text, {
|
|
14
14
|
size: "sm",
|
|
15
15
|
weight: "medium",
|
|
@@ -8,7 +8,7 @@ const NavRailBody = ({ ref, className, children, ...props })=>{
|
|
|
8
8
|
ref: ref,
|
|
9
9
|
"data-slot": "nav-rail-body",
|
|
10
10
|
"data-testid": testId,
|
|
11
|
-
className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto', className),
|
|
11
|
+
className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overscroll-none [scrollbar-width:thin]', className),
|
|
12
12
|
children: children
|
|
13
13
|
});
|
|
14
14
|
};
|
|
@@ -12,7 +12,7 @@ const NavPanelContent = ({ level: rawLevel })=>{
|
|
|
12
12
|
if (0 === level) return /*#__PURE__*/ jsxs(Fragment, {
|
|
13
13
|
children: [
|
|
14
14
|
hasHeaderActions ? /*#__PURE__*/ jsxs("div", {
|
|
15
|
-
className: "sticky top-0 z-10 flex shrink-0 items-center justify-between
|
|
15
|
+
className: "sticky top-0 z-10 flex shrink-0 items-center justify-between pt-2 pl-4 pb-4 bg-bg-surface-2",
|
|
16
16
|
children: [
|
|
17
17
|
/*#__PURE__*/ jsx(Text, {
|
|
18
18
|
size: "sm",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cva } from "class-variance-authority";
|
|
2
2
|
import { cn } from "../../utils/cn.js";
|
|
3
|
-
const segmentedControlVariants = cva('overflow-visible flex bg-bg-primary p-4 gap-0 items-center rounded-12', {
|
|
3
|
+
const segmentedControlVariants = cva('overflow-visible flex bg-bg-primary p-4 gap-0 items-center rounded-12 mb-8', {
|
|
4
4
|
variants: {
|
|
5
5
|
fullWidth: {
|
|
6
6
|
true: 'w-full [&_label]:flex-1',
|
|
@@ -12,7 +12,7 @@ declare const stackVariants: (props?: ({
|
|
|
12
12
|
flexShrink?: boolean | null | undefined;
|
|
13
13
|
gap?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
|
-
type StackNativeProps =
|
|
15
|
+
type StackNativeProps = HTMLAttributes<HTMLDivElement>;
|
|
16
16
|
type StackVariantProps = VariantProps<typeof stackVariants>;
|
|
17
17
|
export type StackProps = StackNativeProps & StackVariantProps & TestableProps & {
|
|
18
18
|
ref?: Ref<HTMLDivElement>;
|
|
@@ -73,7 +73,7 @@ const stackVariants = cva('', {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
});
|
|
76
|
-
const Stack = ({ inline = false, direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap', gap = 4, fullWidth, flexGrow, flexShrink, asChild = false, children, ...props })=>{
|
|
76
|
+
const Stack = ({ inline = false, direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap', gap = 4, fullWidth, flexGrow, flexShrink, asChild = false, className, children, ...props })=>{
|
|
77
77
|
const clones = useMemo(()=>getValidChildren(children).map((child, index)=>{
|
|
78
78
|
const key = void 0 !== child.key ? child.key : index;
|
|
79
79
|
return /*#__PURE__*/ jsx(Fragment, {
|
|
@@ -95,7 +95,7 @@ const Stack = ({ inline = false, direction = 'column', align = 'stretch', justif
|
|
|
95
95
|
fullWidth,
|
|
96
96
|
flexGrow,
|
|
97
97
|
flexShrink
|
|
98
|
-
})),
|
|
98
|
+
}), className),
|
|
99
99
|
children: clones
|
|
100
100
|
});
|
|
101
101
|
};
|
|
@@ -17,7 +17,6 @@ const TableBodyVirtualizedContainer = ()=>{
|
|
|
17
17
|
estimateSize: estimateRowHeight ?? (()=>40),
|
|
18
18
|
overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN
|
|
19
19
|
});
|
|
20
|
-
virtualizer.shouldAdjustScrollPositionOnItemSizeChange = ()=>false;
|
|
21
20
|
virtualizerRef.current = virtualizer;
|
|
22
21
|
useEffect(()=>()=>{
|
|
23
22
|
virtualizerRef.current = null;
|
|
@@ -15,7 +15,6 @@ const TableBodyVirtualizedWindow = ()=>{
|
|
|
15
15
|
overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN,
|
|
16
16
|
scrollMargin: tbodyRef.current ? getDocumentOffsetTop(tbodyRef.current) : 0
|
|
17
17
|
});
|
|
18
|
-
virtualizer.shouldAdjustScrollPositionOnItemSizeChange = ()=>false;
|
|
19
18
|
virtualizerRef.current = virtualizer;
|
|
20
19
|
useEffect(()=>()=>{
|
|
21
20
|
virtualizerRef.current = null;
|
|
@@ -6,10 +6,12 @@ declare const textVariants: (props?: ({
|
|
|
6
6
|
weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
|
|
7
7
|
color?: "primary" | "secondary" | "inherit" | "primary-alt" | "secondary-alt" | "tertiary-alt" | "danger" | null | undefined;
|
|
8
8
|
align?: "center" | "left" | "right" | null | undefined;
|
|
9
|
+
inline?: boolean | null | undefined;
|
|
9
10
|
grow?: boolean | null | undefined;
|
|
10
11
|
truncate?: boolean | null | undefined;
|
|
11
12
|
decoration?: "dashed" | null | undefined;
|
|
12
13
|
lineHeight?: "none" | "normal" | "tight" | "snug" | "relaxed" | null | undefined;
|
|
14
|
+
textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | null | undefined;
|
|
13
15
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
16
|
type TextNativeProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className' | 'color'>;
|
|
15
17
|
type TextVariantProps = VariantProps<typeof textVariants>;
|
|
@@ -31,6 +31,9 @@ const textVariants = cva('font-sans-display break-words', {
|
|
|
31
31
|
center: 'text-center',
|
|
32
32
|
right: 'text-right'
|
|
33
33
|
},
|
|
34
|
+
inline: {
|
|
35
|
+
true: 'inline'
|
|
36
|
+
},
|
|
34
37
|
grow: {
|
|
35
38
|
true: 'flex-1 w-full'
|
|
36
39
|
},
|
|
@@ -47,10 +50,16 @@ const textVariants = cva('font-sans-display break-words', {
|
|
|
47
50
|
snug: 'leading-snug',
|
|
48
51
|
normal: 'leading-normal',
|
|
49
52
|
relaxed: 'leading-relaxed'
|
|
53
|
+
},
|
|
54
|
+
textTransform: {
|
|
55
|
+
uppercase: 'uppercase',
|
|
56
|
+
lowercase: 'lowercase',
|
|
57
|
+
capitalize: 'capitalize',
|
|
58
|
+
none: 'normal-case'
|
|
50
59
|
}
|
|
51
60
|
}
|
|
52
61
|
});
|
|
53
|
-
const Text = ({ size = 'lg', weight = 'regular', color = 'inherit', truncate = false, asChild = false, grow = false, align, decoration, lineHeight, lineClamp, ...props })=>{
|
|
62
|
+
const Text = ({ size = 'lg', weight = 'regular', color = 'inherit', truncate = false, asChild = false, inline, grow = false, align, decoration, lineHeight, lineClamp, textTransform, ...props })=>{
|
|
54
63
|
const Comp = asChild ? Slot : 'p';
|
|
55
64
|
const lineClampClass = lineClamp ? `line-clamp-${lineClamp}` : '';
|
|
56
65
|
return /*#__PURE__*/ jsx(Comp, {
|
|
@@ -59,11 +68,13 @@ const Text = ({ size = 'lg', weight = 'regular', color = 'inherit', truncate = f
|
|
|
59
68
|
size,
|
|
60
69
|
weight,
|
|
61
70
|
color,
|
|
71
|
+
inline,
|
|
62
72
|
truncate,
|
|
63
73
|
align,
|
|
64
74
|
grow,
|
|
65
75
|
decoration,
|
|
66
|
-
lineHeight
|
|
76
|
+
lineHeight,
|
|
77
|
+
textTransform
|
|
67
78
|
}), lineClampClass)
|
|
68
79
|
});
|
|
69
80
|
};
|
|
@@ -8,7 +8,7 @@ const TopHeader = ({ ref, className, children, 'data-testid': testId, ...props }
|
|
|
8
8
|
ref: ref,
|
|
9
9
|
"data-slot": "top-header",
|
|
10
10
|
"data-testid": testId,
|
|
11
|
-
className: cn('flex items-center justify-between pl-
|
|
11
|
+
className: cn('flex items-center justify-between pl-7 pr-12 py-6', className),
|
|
12
12
|
children: children
|
|
13
13
|
})
|
|
14
14
|
});
|
|
@@ -10,7 +10,7 @@ const TopHeaderLogo = ({ ref, asChild = false, className, children, ...props })=
|
|
|
10
10
|
ref: ref,
|
|
11
11
|
"data-slot": "top-header-logo",
|
|
12
12
|
"data-testid": testId,
|
|
13
|
-
className: cn('overlay inline-flex items-center gap-6 rounded-6 px-
|
|
13
|
+
className: cn('overlay inline-flex items-center gap-6 rounded-6 px-6 py-4 text-sm font-semibold outline-none transition-colors', 'hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
|
|
14
14
|
children: children
|
|
15
15
|
});
|
|
16
16
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "0.51.0",
|
|
3
|
-
"generatedAt": "2026-06-
|
|
3
|
+
"generatedAt": "2026-06-01T23:14:46.002Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -4436,7 +4436,7 @@
|
|
|
4436
4436
|
"examples": [
|
|
4437
4437
|
{
|
|
4438
4438
|
"name": "Basic",
|
|
4439
|
-
"code": "() => {\n const pathname = useLocationPathname();\n const activeProduct = deriveProduct(pathname);\n\n const [loading, setLoading] = useState(true);\n const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n const { theme, setTheme } = useTheme();\n const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n return (\n <AppShell>\n <AppShellHeader>\n <TopHeader>\n <TopHeaderLogo href='/'>\n <
|
|
4439
|
+
"code": "() => {\n const pathname = useLocationPathname();\n const activeProduct = deriveProduct(pathname);\n\n const [loading, setLoading] = useState(true);\n const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n const { theme, setTheme } = useTheme();\n const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n return (\n <AppShell>\n <AppShellHeader>\n <TopHeader>\n <TopHeaderLogo href='/'>\n <WallarmLogo />\n </TopHeaderLogo>\n\n <TopHeaderActions>\n {loading ? (\n <>\n <Skeleton width='150px' height='20px' rounded={6} />\n <TopHeaderSeparator />\n <Skeleton width='150px' height='20px' rounded={6} />\n </>\n ) : (\n <>\n <Button\n variant='ghost'\n size='small'\n color='neutral'\n className='p-4 gap-6 rounded-6'\n >\n <Code size='s' color='secondary'>\n Search Wallarm\n </Code>\n <Kbd size='xsmall'>⌘ K</Kbd>\n </Button>\n\n <TopHeaderSeparator />\n\n <Button variant='ghost' size='small' color='neutral' className='py-4 rounded-6'>\n <Text size='xs' weight='medium'>\n Tenant Name\n </Text>\n <span className='text-text-tertiary mx-[-2px]'>•</span>\n <Code size='s' color='secondary'>\n 12345\n </Code>\n <ChevronUpDown className='!icon-sm' />\n </Button>\n </>\n )}\n\n <Tooltip>\n <TooltipTrigger asChild>\n <Button variant='ghost' size='small' color='neutral' aria-label='Wallarm Updates'>\n <Bell />\n </Button>\n </TooltipTrigger>\n <TooltipContent>Wallarm updates</TooltipContent>\n </Tooltip>\n\n <QuickHelpDropdown />\n </TopHeaderActions>\n </TopHeader>\n </AppShellHeader>\n\n <AppShellRail>\n <NavRail collapsed={collapsed}>\n <NavRailBody>\n <NavRailItem\n icon={Home}\n label='Home'\n shortcut={['G', 'H']}\n active={activeProduct === 'home'}\n onClick={() => navigateToProduct('home')}\n />\n <RecentDropdown />\n\n <NavRailSeparator />\n\n {loading ? (\n <NavRailSkeleton />\n ) : (\n <>\n <NavRailItem\n icon={CircleDashed}\n label='Edge'\n shortcut={['G', 'E']}\n active={activeProduct === 'edge'}\n onClick={() => navigateToProduct('edge')}\n />\n <NavRailItem\n icon={CircleDashed}\n label='AI Hypervisor'\n shortcut={['G', 'A']}\n active={activeProduct === 'ai-hypervisor'}\n onClick={() => navigateToProduct('ai-hypervisor')}\n />\n <NavRailItem\n icon={CircleDashed}\n label='Infra Discovery'\n shortcut={['G', 'I']}\n active={activeProduct === 'infra-discovery'}\n onClick={() => navigateToProduct('infra-discovery')}\n />\n <NavRailItem\n icon={CircleDashed}\n label='Security Testing'\n shortcut={['G', 'T']}\n active={activeProduct === 'security-testing'}\n onClick={() => navigateToProduct('security-testing')}\n />\n </>\n )}\n </NavRailBody>\n\n <NavRailFooter>\n <NavRailItem\n icon={Settings}\n label='Settings'\n shortcut={['G', 'S']}\n active={activeProduct === 'settings'}\n onClick={() => navigateToProduct('settings')}\n />\n <AccountDropdown\n sidebarMode={sidebarMode}\n onSidebarModeChange={setSidebarMode}\n theme={theme}\n onThemeChange={setTheme}\n />\n </NavRailFooter>\n </NavRail>\n </AppShellRail>\n\n <AppShellRemote>\n <div className='absolute top-4 right-4 z-10'>\n <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n {loading ? 'Finish loading' : 'Start loading'}\n </Button>\n </div>\n\n <RemoteForProduct product={activeProduct} />\n </AppShellRemote>\n </AppShell>\n );\n}"
|
|
4440
4440
|
}
|
|
4441
4441
|
]
|
|
4442
4442
|
},
|
|
@@ -49891,6 +49891,48 @@
|
|
|
49891
49891
|
{
|
|
49892
49892
|
"name": "HStack",
|
|
49893
49893
|
"props": [
|
|
49894
|
+
{
|
|
49895
|
+
"name": "inline",
|
|
49896
|
+
"type": "{ true: string; false: string; }",
|
|
49897
|
+
"required": false
|
|
49898
|
+
},
|
|
49899
|
+
{
|
|
49900
|
+
"name": "align",
|
|
49901
|
+
"type": "{ start: string; center: string; end: string; stretch: string; baseline: string; }",
|
|
49902
|
+
"required": false,
|
|
49903
|
+
"defaultValue": "center"
|
|
49904
|
+
},
|
|
49905
|
+
{
|
|
49906
|
+
"name": "justify",
|
|
49907
|
+
"type": "{ start: string; center: string; end: string; between: string; around: string; evenly: string; }",
|
|
49908
|
+
"required": false,
|
|
49909
|
+
"defaultValue": "start"
|
|
49910
|
+
},
|
|
49911
|
+
{
|
|
49912
|
+
"name": "wrap",
|
|
49913
|
+
"type": "{ wrap: string; nowrap: string; reverse: string; }",
|
|
49914
|
+
"required": false
|
|
49915
|
+
},
|
|
49916
|
+
{
|
|
49917
|
+
"name": "fullWidth",
|
|
49918
|
+
"type": "{ true: string; }",
|
|
49919
|
+
"required": false
|
|
49920
|
+
},
|
|
49921
|
+
{
|
|
49922
|
+
"name": "flexGrow",
|
|
49923
|
+
"type": "{ true: string; }",
|
|
49924
|
+
"required": false
|
|
49925
|
+
},
|
|
49926
|
+
{
|
|
49927
|
+
"name": "flexShrink",
|
|
49928
|
+
"type": "{ true: string; false: string; }",
|
|
49929
|
+
"required": false
|
|
49930
|
+
},
|
|
49931
|
+
{
|
|
49932
|
+
"name": "gap",
|
|
49933
|
+
"type": "complex",
|
|
49934
|
+
"required": false
|
|
49935
|
+
},
|
|
49894
49936
|
{
|
|
49895
49937
|
"name": "defaultChecked",
|
|
49896
49938
|
"type": "boolean | undefined",
|
|
@@ -50161,6 +50203,16 @@
|
|
|
50161
50203
|
"required": false,
|
|
50162
50204
|
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
50163
50205
|
},
|
|
50206
|
+
{
|
|
50207
|
+
"name": "asChild",
|
|
50208
|
+
"type": "boolean | undefined",
|
|
50209
|
+
"required": false
|
|
50210
|
+
}
|
|
50211
|
+
]
|
|
50212
|
+
},
|
|
50213
|
+
{
|
|
50214
|
+
"name": "VStack",
|
|
50215
|
+
"props": [
|
|
50164
50216
|
{
|
|
50165
50217
|
"name": "inline",
|
|
50166
50218
|
"type": "{ true: string; false: string; }",
|
|
@@ -50169,14 +50221,12 @@
|
|
|
50169
50221
|
{
|
|
50170
50222
|
"name": "align",
|
|
50171
50223
|
"type": "{ start: string; center: string; end: string; stretch: string; baseline: string; }",
|
|
50172
|
-
"required": false
|
|
50173
|
-
"defaultValue": "center"
|
|
50224
|
+
"required": false
|
|
50174
50225
|
},
|
|
50175
50226
|
{
|
|
50176
50227
|
"name": "justify",
|
|
50177
50228
|
"type": "{ start: string; center: string; end: string; between: string; around: string; evenly: string; }",
|
|
50178
|
-
"required": false
|
|
50179
|
-
"defaultValue": "start"
|
|
50229
|
+
"required": false
|
|
50180
50230
|
},
|
|
50181
50231
|
{
|
|
50182
50232
|
"name": "wrap",
|
|
@@ -50203,16 +50253,6 @@
|
|
|
50203
50253
|
"type": "complex",
|
|
50204
50254
|
"required": false
|
|
50205
50255
|
},
|
|
50206
|
-
{
|
|
50207
|
-
"name": "asChild",
|
|
50208
|
-
"type": "boolean | undefined",
|
|
50209
|
-
"required": false
|
|
50210
|
-
}
|
|
50211
|
-
]
|
|
50212
|
-
},
|
|
50213
|
-
{
|
|
50214
|
-
"name": "VStack",
|
|
50215
|
-
"props": [
|
|
50216
50256
|
{
|
|
50217
50257
|
"name": "defaultChecked",
|
|
50218
50258
|
"type": "boolean | undefined",
|
|
@@ -50483,46 +50523,6 @@
|
|
|
50483
50523
|
"required": false,
|
|
50484
50524
|
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
50485
50525
|
},
|
|
50486
|
-
{
|
|
50487
|
-
"name": "inline",
|
|
50488
|
-
"type": "{ true: string; false: string; }",
|
|
50489
|
-
"required": false
|
|
50490
|
-
},
|
|
50491
|
-
{
|
|
50492
|
-
"name": "align",
|
|
50493
|
-
"type": "{ start: string; center: string; end: string; stretch: string; baseline: string; }",
|
|
50494
|
-
"required": false
|
|
50495
|
-
},
|
|
50496
|
-
{
|
|
50497
|
-
"name": "justify",
|
|
50498
|
-
"type": "{ start: string; center: string; end: string; between: string; around: string; evenly: string; }",
|
|
50499
|
-
"required": false
|
|
50500
|
-
},
|
|
50501
|
-
{
|
|
50502
|
-
"name": "wrap",
|
|
50503
|
-
"type": "{ wrap: string; nowrap: string; reverse: string; }",
|
|
50504
|
-
"required": false
|
|
50505
|
-
},
|
|
50506
|
-
{
|
|
50507
|
-
"name": "fullWidth",
|
|
50508
|
-
"type": "{ true: string; }",
|
|
50509
|
-
"required": false
|
|
50510
|
-
},
|
|
50511
|
-
{
|
|
50512
|
-
"name": "flexGrow",
|
|
50513
|
-
"type": "{ true: string; }",
|
|
50514
|
-
"required": false
|
|
50515
|
-
},
|
|
50516
|
-
{
|
|
50517
|
-
"name": "flexShrink",
|
|
50518
|
-
"type": "{ true: string; false: string; }",
|
|
50519
|
-
"required": false
|
|
50520
|
-
},
|
|
50521
|
-
{
|
|
50522
|
-
"name": "gap",
|
|
50523
|
-
"type": "complex",
|
|
50524
|
-
"required": false
|
|
50525
|
-
},
|
|
50526
50526
|
{
|
|
50527
50527
|
"name": "asChild",
|
|
50528
50528
|
"type": "boolean | undefined",
|
|
@@ -52811,6 +52811,11 @@
|
|
|
52811
52811
|
"type": "{ left: string; center: string; right: string; }",
|
|
52812
52812
|
"required": false
|
|
52813
52813
|
},
|
|
52814
|
+
{
|
|
52815
|
+
"name": "inline",
|
|
52816
|
+
"type": "{ true: string; }",
|
|
52817
|
+
"required": false
|
|
52818
|
+
},
|
|
52814
52819
|
{
|
|
52815
52820
|
"name": "grow",
|
|
52816
52821
|
"type": "{ true: string; }",
|
|
@@ -52833,6 +52838,11 @@
|
|
|
52833
52838
|
"type": "{ none: string; tight: string; snug: string; normal: string; relaxed: string; }",
|
|
52834
52839
|
"required": false
|
|
52835
52840
|
},
|
|
52841
|
+
{
|
|
52842
|
+
"name": "textTransform",
|
|
52843
|
+
"type": "{ uppercase: string; lowercase: string; capitalize: string; none: string; }",
|
|
52844
|
+
"required": false
|
|
52845
|
+
},
|
|
52836
52846
|
{
|
|
52837
52847
|
"name": "asChild",
|
|
52838
52848
|
"type": "boolean | undefined",
|
|
@@ -52885,6 +52895,12 @@
|
|
|
52885
52895
|
"right"
|
|
52886
52896
|
]
|
|
52887
52897
|
},
|
|
52898
|
+
{
|
|
52899
|
+
"name": "inline",
|
|
52900
|
+
"options": [
|
|
52901
|
+
"true"
|
|
52902
|
+
]
|
|
52903
|
+
},
|
|
52888
52904
|
{
|
|
52889
52905
|
"name": "grow",
|
|
52890
52906
|
"options": [
|
|
@@ -52913,6 +52929,15 @@
|
|
|
52913
52929
|
"normal",
|
|
52914
52930
|
"relaxed"
|
|
52915
52931
|
]
|
|
52932
|
+
},
|
|
52933
|
+
{
|
|
52934
|
+
"name": "textTransform",
|
|
52935
|
+
"options": [
|
|
52936
|
+
"uppercase",
|
|
52937
|
+
"lowercase",
|
|
52938
|
+
"capitalize",
|
|
52939
|
+
"none"
|
|
52940
|
+
]
|
|
52916
52941
|
}
|
|
52917
52942
|
],
|
|
52918
52943
|
"subComponents": [],
|
|
@@ -58351,7 +58376,7 @@
|
|
|
58351
58376
|
},
|
|
58352
58377
|
{
|
|
58353
58378
|
"name": "--color-component-tooltip-bg",
|
|
58354
|
-
"value": "--alpha(var(--color-slate-100) /
|
|
58379
|
+
"value": "--alpha(var(--color-slate-100) / 93%)"
|
|
58355
58380
|
},
|
|
58356
58381
|
{
|
|
58357
58382
|
"name": "--color-component-logo-ic",
|
package/dist/theme/semantic.css
CHANGED
|
@@ -597,7 +597,7 @@
|
|
|
597
597
|
--color-component-border-hotkey: var(--color-slate-700);
|
|
598
598
|
--color-component-border-input-hover: var(--color-slate-500);
|
|
599
599
|
--color-component-overlay: --alpha(var(--color-slate-950) / 60%);
|
|
600
|
-
--color-component-tooltip-bg: --alpha(var(--color-slate-100) /
|
|
600
|
+
--color-component-tooltip-bg: --alpha(var(--color-slate-100) / 93%);
|
|
601
601
|
--color-component-logo-ic: var(--color-w-orange-600);
|
|
602
602
|
--color-component-logo-wordmark: var(--color-white);
|
|
603
603
|
--color-component-logo-wordmark-alt: var(--color-slate-950);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wallarm-org/design-system",
|
|
3
|
-
"version": "0.51.1-rc-fix-
|
|
3
|
+
"version": "0.51.1-rc-fix-tests.1",
|
|
4
4
|
"description": "Core design system library with React components and Storybook documentation",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|