@factorialco/f0-react 7.10.0 → 7.12.0

package/dist/experimental.d.ts

@@ -4179,7 +4179,7 @@ declare type CompanyAvatarVariant = Extract<AvatarVariant, {
     type: "company";
 }>;
 
-export declare function CompanySelector({ companies, selected, onChange, isLoading, withNotification, additionalOptions, }: CompanySelectorProps): JSX_2.Element;
+export declare function CompanySelector({ companies, selected, onChange, isLoading, withNotification, additionalOptions, variant, }: CompanySelectorProps): JSX_2.Element;
 
 export declare type CompanySelectorProps = {
     companies: Company[];
@@ -4194,6 +4194,13 @@ export declare type CompanySelectorProps = {
         description?: string;
         onClick?: () => void;
     }[];
+    /**
+     * `"compact"` is the logo alone — no name, no chevron — for the module rail,
+     * where the name has nowhere to go. It is the same select underneath: the
+     * company list, the extra options and the switch all behave identically, and
+     * the name reaches assistive tech through the trigger's `aria-label`.
+     */
+    variant?: "default" | "compact";
 };
 
 declare type CompanyTagProps = ComponentProps<typeof F0TagCompany>;
@@ -5188,6 +5195,9 @@ declare const defaultTranslations: {
             readonly tabs: {
                 readonly label: "Sidebar sections";
             };
+            readonly rail: {
+                readonly label: "Modules";
+            };
             readonly companySelector: {
                 readonly label: "Select a company";
                 readonly placeholder: "Select a company";
@@ -11165,6 +11175,20 @@ declare interface FrameContextType {
         isInvokedByUser: boolean;
     }) => void;
     setForceFloat: (force: boolean) => void;
+    /**
+     * How much room the permanent module rail takes, or 0 when the sidebar has
+     * no rail (the classic composition). Registered by `Sidebar` when it is
+     * given a `rail`, because the frame receives the whole navigation as one
+     * opaque node and cannot see inside it.
+     */
+    railWidth: number;
+    /**
+     * Whether navigation is permanently on screen. What reads this is the
+     * "Open main menu" button in the page surfaces: with a rail there is no
+     * state without navigation, so the button has nothing to restore.
+     */
+    hasRail: boolean;
+    setRailWidth: (width: number) => void;
 }
 
 /**
@@ -15186,7 +15210,7 @@ declare const shortcutVariants: (props?: ({
 
 export declare const Sidebar: WithDataTestIdReturnType_3<typeof _Sidebar>;
 
-declare function _Sidebar({ header, body, footer, onFooterDropdownClick, }: SidebarProps): JSX_2.Element;
+declare function _Sidebar({ header, body, footer, onFooterDropdownClick, rail, }: SidebarProps): JSX_2.Element;
 
 export declare type SidebarChat = {
     id: string;
@@ -15455,11 +15479,7 @@ export declare interface SidebarCollapsibleSectionProps {
 export declare function SidebarFooter({ user, options, showActivityButton, activityButtonShortcut, onActivityButtonClick, onDropdownClick, hasActivityUpdates, }: SidebarFooterProps): JSX_2.Element;
 
 declare interface SidebarFooterProps {
-    user: {
-        firstName: string;
-        lastName: string;
-        avatarUrl?: string;
-    };
+    user: SidebarUser;
     showActivityButton?: boolean;
     hasActivityUpdates?: boolean;
     activityButtonShortcut?: string[];
@@ -15477,13 +15497,80 @@ declare type SidebarIconProps = {
     onClick?: () => void;
 };
 
+/**
+ * The panel's title bar in the rail composition: the active section, and the
+ * control that collapses the panel down to the rail.
+ *
+ * `SidebarIcon` already renders as a cross on a small screen, so the same
+ * button reads as "collapse" on desktop and "close" over the drawer.
+ */
+export declare function SidebarPanelHeader({ title, actions, }: SidebarPanelHeaderProps): JSX_2.Element;
+
+export declare type SidebarPanelHeaderProps = {
+    /**
+     * What the panel is showing — normally the label of the active rail tab.
+     *
+     * The company's name used to sit here. It moved into the rail's dropdown:
+     * which workspace you are in changes once a session, which section you are
+     * in changes constantly, and only one of the two earns the top of the panel.
+     */
+    title: string;
+    /** Controls to the left of the collapse toggle (e.g. a "new" button). */
+    actions?: ReactNode;
+};
+
 declare interface SidebarProps {
     header?: ReactNode;
     body?: ReactNode;
     footer?: ReactNode;
     onFooterDropdownClick?: () => void;
+    /**
+     * The permanent module rail (`SidebarRail`), to the left of the panel.
+     *
+     * Passing it changes what "collapsed" means for the whole frame: the rail is
+     * docked at every viewport and never animates, and the panel is the only
+     * thing that slides away. Omit it and the sidebar behaves exactly as before.
+     */
+    rail?: ReactNode;
 }
 
+/**
+ * The permanent module rail: the workspace logo, the modules, and the account.
+ *
+ * It is the half of the navigation that never collapses — at any viewport,
+ * including mobile. That is the whole point of it: with the modules always on
+ * screen there is no state in which the app has no navigation, so nothing has
+ * to put an "open main menu" button back into the content to compensate.
+ */
+export declare function SidebarRail({ company, tabs, activeTab, onTabChange, persistKey, onActiveTabPress, actions, user, }: SidebarRailProps): JSX_2.Element;
+
+/** A shortcut pinned to the foot of the rail — marketplace, security, activity. */
+export declare type SidebarRailAction = {
+    id: string;
+    label: string;
+    icon: IconType;
+    onClick: () => void;
+    /** Show the unread marker over the icon. */
+    hasUpdates?: boolean;
+};
+
+export declare type SidebarRailProps = {
+    /** The workspace switcher, rendered as the logo alone. */
+    company: Omit<CompanySelectorProps, "variant">;
+    tabs: SidebarTab[];
+    activeTab: string;
+    onTabChange: (id: string) => void;
+    /**
+     * Remember the active tab across reloads. Same key space as `SidebarTabs`,
+     * so a host that swaps one for the other keeps the user where they were.
+     */
+    persistKey?: string;
+    /** Pressing the module you are already in. Hosts use it to fold the panel. */
+    onActiveTabPress?: () => void;
+    actions?: SidebarRailAction[];
+    user?: Omit<SidebarUserMenuProps, "compact">;
+};
+
 /**
  * One action on a section's own header — "new channel" beside Channels, "new
  * community" beside Communities. Icon-only, and revealed on hover like the
@@ -15617,6 +15704,32 @@ export declare type SidebarTabsProps = {
     persistKey?: string;
 };
 
+export declare type SidebarUser = {
+    firstName: string;
+    lastName: string;
+    avatarUrl?: string;
+};
+
+/**
+ * The account menu: an avatar that opens the user's dropdown.
+ *
+ * Shared by `SidebarFooter` (full row, at the bottom of the panel) and
+ * `SidebarRail` (avatar only, at the bottom of the rail) so the two can never
+ * disagree about what the account menu contains or how it opens.
+ */
+export declare function SidebarUserMenu({ user, options, onDropdownClick, compact, }: SidebarUserMenuProps): JSX_2.Element;
+
+export declare type SidebarUserMenuProps = {
+    user: SidebarUser;
+    options: DropdownItem[];
+    onDropdownClick?: () => void;
+    /**
+     * Avatar only — the rail, where the name has nowhere to go. Defaults to the
+     * full row (avatar + name) the footer uses.
+     */
+    compact?: boolean;
+};
+
 /**
  * A single piece of content hosted in the side panel — the resizable,
  * fullscreen-able space beside the page. Only one is mounted at a time: the
@@ -18028,11 +18141,9 @@ declare namespace Calendar {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        enhanceHighlight: {
-            setEnhanceHighlight: (from: number, to: number, options?: {
-                placeholder?: string;
-            }) => ReturnType;
-            clearEnhanceHighlight: () => ReturnType;
+        aiBlock: {
+            insertAIBlock: (data: AIBlockData, config: AIBlockConfig) => ReturnType;
+            executeAIAction: (actionType: string, config: AIBlockConfig) => ReturnType;
         };
     }
 }
@@ -18040,9 +18151,11 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        aiBlock: {
-            insertAIBlock: (data: AIBlockData, config: AIBlockConfig) => ReturnType;
-            executeAIAction: (actionType: string, config: AIBlockConfig) => ReturnType;
+        enhanceHighlight: {
+            setEnhanceHighlight: (from: number, to: number, options?: {
+                placeholder?: string;
+            }) => ReturnType;
+            clearEnhanceHighlight: () => ReturnType;
         };
     }
 }