@wallarm-org/design-system 0.51.2-rc-feature-shell.1 → 0.52.0-rc-feature-shell.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/NavRail/NavRail.d.ts +1 -0
- package/dist/components/NavRail/NavRail.js +2 -2
- package/dist/components/NavRail/classes.js +1 -1
- package/dist/components/TopHeader/TopHeader.d.ts +1 -0
- package/dist/components/TopHeader/TopHeader.js +2 -2
- package/dist/metadata/components.json +13 -3
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import { cn } from "../../utils/cn.js";
|
|
|
6
6
|
import { TestIdProvider } from "../../utils/testId.js";
|
|
7
7
|
import { navRailVariants } from "./classes.js";
|
|
8
8
|
import { NavRailContextProvider } from "./NavRailContext.js";
|
|
9
|
-
const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': testId, ...props })=>{
|
|
9
|
+
const NavRail = ({ ref, collapsed = false, appeared, className, children, 'data-testid': testId, ...props })=>{
|
|
10
10
|
const internalRef = useRef(null);
|
|
11
11
|
const focusPanel = useCallback(()=>{
|
|
12
12
|
const panel = document.querySelector('[data-slot="nav-panel"]');
|
|
@@ -47,7 +47,7 @@ const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': t
|
|
|
47
47
|
"data-testid": testId,
|
|
48
48
|
className: cn(navRailVariants({
|
|
49
49
|
collapsed
|
|
50
|
-
}), className),
|
|
50
|
+
}), false === appeared && 'opacity-0', className),
|
|
51
51
|
children: children
|
|
52
52
|
})
|
|
53
53
|
})
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cva } from "class-variance-authority";
|
|
2
|
-
const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8 pt-6 pb-12 transition-[width] duration-200 ease-in-out', {
|
|
2
|
+
const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8 pt-6 pb-12 transition-[width] duration-200 ease-in-out transition-[width,opacity] duration-200 ease-in-out', {
|
|
3
3
|
variants: {
|
|
4
4
|
collapsed: {
|
|
5
5
|
true: 'w-[48px]',
|
|
@@ -3,5 +3,6 @@ import { type TestableProps } from '../../utils/testId';
|
|
|
3
3
|
export interface TopHeaderProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
|
|
4
4
|
ref?: Ref<HTMLDivElement>;
|
|
5
5
|
children?: ReactNode;
|
|
6
|
+
appeared?: boolean;
|
|
6
7
|
}
|
|
7
8
|
export declare const TopHeader: FC<TopHeaderProps>;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../../utils/cn.js";
|
|
3
3
|
import { TestIdProvider } from "../../utils/testId.js";
|
|
4
|
-
const TopHeader = ({ ref, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
|
|
4
|
+
const TopHeader = ({ ref, appeared, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
|
|
5
5
|
value: testId,
|
|
6
6
|
children: /*#__PURE__*/ jsx("div", {
|
|
7
7
|
...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-7 pr-12 py-6', className),
|
|
11
|
+
className: cn('flex items-center justify-between pl-7 pr-12 py-6', 'transition-opacity duration-200 ease-in-out', false === appeared && 'opacity-0', className),
|
|
12
12
|
children: children
|
|
13
13
|
})
|
|
14
14
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.51.
|
|
3
|
-
"generatedAt": "2026-06-
|
|
2
|
+
"version": "0.51.2",
|
|
3
|
+
"generatedAt": "2026-06-03T00:07:48.454Z",
|
|
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 <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}"
|
|
4439
|
+
"code": "() => {\n const pathname = useLocationPathname();\n const activeProduct = deriveProduct(pathname);\n\n const [appeared, setAppeared] = useState(true);\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 appeared={appeared}>\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} appeared={appeared}>\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='flex gap-8 absolute top-4 right-4 z-10'>\n <Button variant='ghost' size='small' color='neutral' onClick={() => setAppeared(v => !v)}>\n {appeared ? 'Hide menu' : 'Show menu'}\n </Button>\n\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
|
},
|
|
@@ -27826,6 +27826,11 @@
|
|
|
27826
27826
|
"required": false,
|
|
27827
27827
|
"defaultValue": "false"
|
|
27828
27828
|
},
|
|
27829
|
+
{
|
|
27830
|
+
"name": "appeared",
|
|
27831
|
+
"type": "boolean | undefined",
|
|
27832
|
+
"required": false
|
|
27833
|
+
},
|
|
27829
27834
|
{
|
|
27830
27835
|
"name": "defaultChecked",
|
|
27831
27836
|
"type": "boolean | undefined",
|
|
@@ -54317,6 +54322,11 @@
|
|
|
54317
54322
|
"name": "TopHeader",
|
|
54318
54323
|
"importPath": "@wallarm-org/design-system/TopHeader",
|
|
54319
54324
|
"props": [
|
|
54325
|
+
{
|
|
54326
|
+
"name": "appeared",
|
|
54327
|
+
"type": "boolean | undefined",
|
|
54328
|
+
"required": false
|
|
54329
|
+
},
|
|
54320
54330
|
{
|
|
54321
54331
|
"name": "defaultChecked",
|
|
54322
54332
|
"type": "boolean | undefined",
|
package/package.json
CHANGED