@imfusion/web-ui 0.11.1-dev.88.gafff02ef → 0.11.1-dev.95.g94cb131e

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ### Added
 
+- `AppShell.Navbar` takes `collapse` to put the navbar away. With `"hidden"` it waits behind the page, and a panel toggle in
+  a 4rem column at the start opens it; with `"rail"` that column shows its icons, each named in a tooltip, with a mark under
+  the current page. Opening recedes the page to an inset card and slides the navbar in; a tap on the page, Escape, or a
+  followed link closes it, and focus returns to the toggle. Below md both open full screen. `openLabel` and `closeLabel`
+  name the toggle, and `--imf-ui-appshell-recede-open` and `--imf-ui-appshell-recede-close` set the motion.
+  `useAppShellNavbar()` reads and sets the navbar's open state from app code. The default, `collapse="none"`, is unchanged.
+  [Hidden](src/components/app-shell/app-shell.stories.tsx#Hidden), [Rail](src/components/app-shell/app-shell.stories.tsx#Rail)
+  ([WEBSDK-307](https://imfusion.atlassian.net/browse/WEBSDK-307)) — Nikolaus Brunner <brunner@imfusion.com>
 - `RichLink` takes `size="sm"` for dense lists: 6px block padding, a 32px tile, and a closer gap between glyph and text. The default `md` is unchanged.
   [RichLink](src/components/rich-link/rich-link.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Code.Inline` takes `concealable` to hide its content behind an eye button, hidden by default. `concealed` and

package/dist/components/app-shell/app-shell-context.d.ts

@@ -0,0 +1,25 @@
+/** What a closed navbar leaves on screen from `md` up: docked (`none`), only its toggle (`hidden`), or its icon rail. */
+export type Collapse = "none" | "hidden" | "rail";
+type Disclosure = {
+    id: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+export type NavbarSection = Disclosure & {
+    variant: "default" | "branded";
+    logo: React.ReactNode;
+    collapse: Collapse;
+    openLabel: string;
+    closeLabel: string;
+};
+export type Sections = {
+    navbar?: NavbarSection;
+};
+export declare const ShellContext: import('react').Context<HTMLDivElement | null>;
+export declare const BackstageContext: import('react').Context<HTMLDivElement | null>;
+export declare const SectionsContext: import('react').Context<{
+    sections: Sections;
+    setSections: React.Dispatch<React.SetStateAction<Sections>>;
+}>;
+export declare const InClosingNavbarContext: import('react').Context<boolean>;
+export {};

package/dist/components/app-shell/app-shell.d.ts

@@ -1,5 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
+import { Collapse } from './app-shell-context';
 declare const navbarSurface: (props?: ({
     variant?: "default" | "branded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -49,6 +50,15 @@ type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurfa
     logo?: React.ReactNode;
     /** The signed-in account at the foot of the rail, usually an `AccountCard`. Without it the foot is omitted. */
     account?: React.ReactNode;
+    /**
+     * What a closed navbar leaves on screen from `md` up. `none` docks it and never closes; `hidden` leaves only the
+     * shell's toggle; `rail` leaves its icon rail. Opening a collapsing navbar recedes the page in front of it.
+     */
+    collapse?: Collapse;
+    /** Accessible name of the shell's toggle while the navbar is closed. */
+    openLabel?: string;
+    /** Accessible name of the shell's toggle while the navbar is open, and of the page cover that closes it. */
+    closeLabel?: string;
 };
 /**
  * The navbar owns its frame: `logo` on top, the children (nav items) in the middle, `account` at the foot. Without a
@@ -56,7 +66,7 @@ type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurfa
  * color; children opt into on-color themselves. Below `md` the navbar opens as a drawer from the inline start, with its
  * close on the logo row.
  */
-declare function Navbar({ variant, open, defaultOpen, onOpenChange, logo, account, children, id, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+declare function Navbar({ variant, open, defaultOpen, onOpenChange, logo, account, collapse, openLabel, closeLabel, children, id, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Navbar {
     var displayName: string;
 }
@@ -102,7 +112,7 @@ type NavItemProps = useRender.ComponentProps<"a"> & {
  * `aria-current="page"` underlines the label. Pass a router link through `render`. Followed inside the navbar drawer,
  * it closes the drawer.
  */
-declare function NavItem({ icon, description, children, render, onClick, ...props }: NavItemProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function NavItem({ icon, description, children, render, onClick, ...props }: NavItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NavItem {
     var displayName: string;
 }

package/dist/components/app-shell/index.d.ts

@@ -1,2 +1,3 @@
 export * as AppShell from './app-shell';
 export { appShellMeta } from './app-shell.meta';
+export { useAppShellNavbar } from './use-app-shell-navbar';

package/dist/components/app-shell/use-app-shell-navbar.d.ts

@@ -0,0 +1,11 @@
+import { Collapse } from './app-shell-context';
+/**
+ * Reads and drives the AppShell navbar from anywhere inside `AppShell.Root`, such as opening it to point at something.
+ * `setOpen` goes through the navbar's `onOpenChange`, so it works for a controlled navbar too. A docked navbar
+ * (`collapse="none"`) only opens below `md`, where it is a drawer.
+ */
+export declare function useAppShellNavbar(): {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    collapse: Collapse;
+};

package/dist/index.d.ts

@@ -19,7 +19,7 @@ export { Switch, switchMeta } from './components/switch';
 export { Textarea, textareaMeta } from './components/textarea';
 export { Toggle, toggleMeta } from './components/toggle';
 export { ToggleGroup, toggleGroupMeta } from './components/toggle-group';
-export { AppShell, appShellMeta } from './components/app-shell';
+export { AppShell, appShellMeta, useAppShellNavbar } from './components/app-shell';
 export { Card, cardMeta } from './components/card';
 export { Dialog, dialogMeta } from './components/dialog';
 export { Drawer, drawerMeta } from './components/drawer';