@codebit-programando-solucoes/codebit-web-antd 1.1.39 → 1.1.41

package/dist/components/CssTokenBridge.d.ts

@@ -1,8 +1,11 @@
 import { FC } from 'react';
 
 /**
- * A bridge component that syncs Ant Design theme tokens to CSS custom properties. This component doesn't render anything visible but sets CSS variables on the document root
- * element, making Ant Design tokens available for use in regular CSS files.
+ * A bridge component that syncs Ant Design theme tokens to CSS custom properties. This component doesn't render anything visible but sets CSS variables on
+ * `document.documentElement` (always) and, when `containerId` is given and found, additionally on that container element, making Ant Design tokens available for use in regular
+ * CSS files. Writing to `document.documentElement` unconditionally — not just the scoped container — means the variables are also reachable by content antd portals outside
+ * `containerId` (e.g. a `Dropdown`/`Modal`/`Tooltip` popup, which mounts as a child of `document.body` by default); scoped consumers still get the more specific, closer value
+ * from `containerId` since it wins the normal CSS-inheritance cascade over `document.documentElement`.
  *
  * The following CSS variables are exposed:
  *
@@ -56,7 +59,6 @@ import { FC } from 'react';
  * - --antd-color-fill-alter-active (Alternate fill active state)
  * - --antd-color-fill-alter-selected (Alternate fill selected state)
  * - --antd-color-fill-alter-disabled (Alternate fill disabled state)
- * - --antd-color-fill-disabled (General fill disabled state)
  * - --antd-color-white (Pure white)
  * - --antd-color-black (Pure black)
  *
@@ -98,11 +100,13 @@ import { FC } from 'react';
  *
  * **Line height tokens:**
  *
+ * - --antd-line-height-sm (Smaller line height for tight text)
  * - --antd-line-height (Base line height)
  * - --antd-line-height-lg (Large line height)
  *
  * **Control height tokens:**
  *
+ * - --antd-control-height-xs (Extra small control height, e.g. a small tag)
  * - --antd-control-height-sm (Small control height)
  * - --antd-control-height (Base control height)
  * - --antd-control-height-lg (Large control height)
@@ -113,6 +117,11 @@ import { FC } from 'react';
  * - --antd-border-radius (Base border radius)
  * - --antd-border-radius-lg (Large border radius)
  *
+ * **Shadow tokens:**
+ *
+ * - --antd-shadow (Default shadow for elevated containers)
+ * - --antd-shadow-lg (Enhanced shadow for stronger visual separation — also what antd's own Dropdown/Popover/Modal use)
+ *
  * @example
  *     ```tsx
  *     // Place this component at the root level of your app
@@ -140,7 +149,7 @@ import { FC } from 'react';
  *     ```;
  */
 export interface CssTokenBridgeProps {
-    /** Optional ID of the container element to receive the CSS variables. */
+    /** Optional ID of a container element to additionally receive the CSS variables (in addition to `document.documentElement`, which always receives them). */
     containerId?: string;
 }
 

package/dist/components/LoggedMainContainer.d.ts

@@ -17,6 +17,7 @@ export interface LoggedMainContainerProps {
  * - Role‑based menu filtering
  * - User logout functionality
  * - Application version display
+ * - Header user-profile avatar/dropdown (see `UserMenu`), built from the `userMenuItems` config function
  *
  * This component must be used within a `CodebitConfigProvider` and `CodebitThemeContext` context to access configuration such as menu items, user data, and theme settings.
  *

package/dist/components/UserMenu.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import type { LoggedUser, MenuItem } from '../contexts';
+
+/** Props for the UserMenu component */
+export interface UserMenuProps {
+    /** Currently logged-in user, or `null`/`undefined` when not available. */
+    user?: LoggedUser | null;
+    /** Items rendered in the dropdown, already role-filtered by the caller. When empty, only the avatar is rendered (no dropdown). */
+    items?: MenuItem[];
+    /** Called with the clicked item's key. */
+    onItemClick?: (key: string) => void;
+    /** Icon shown next to the avatar to indicate the dropdown affordance. Defaults to `<DownOutlined />`. */
+    caretIcon?: ReactNode;
+}
+
+/**
+ * Header user-profile control. Renders the current user's avatar and, when `items` is non-empty, a dropdown showing the user's name/subtitle followed by the given menu items (e.g.
+ * a "Minhas preferências" entry supplied by the host application).
+ *
+ * @param props - Component props
+ * @returns React.JSX.Element - Avatar, optionally wrapped in a Dropdown
+ * @component
+ */
+export function UserMenu(props: UserMenuProps): React.JSX.Element;

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './LoggedMainContainer';
 export * from './ThemeToggle';
+export * from './UserMenu';
 export * from './ErrorRetry';
 export * from './ListCard';
 export * from './CssTokenBridge';

package/dist/contexts/CodebitConfigContext.d.ts

@@ -29,6 +29,8 @@ export interface LoggedUser {
     id?: string;
     /** User roles/permissions */
     roles?: string[];
+    /** Short label shown under the user's name in the header user menu (e.g. a role/department name). */
+    subtitle?: string;
 }
 
 /** Context type definition for Codebit configuration. */
@@ -60,10 +62,21 @@ export interface CodebitConfigContextType {
     /** Function that returns menu items configuration for items displayed above the logout button in the bottom menu. */
     bottomMenuItems?: (user?: LoggedUser) => MenuItem[];
     /**
-     * Function invoked when a menu item is clicked. Receives the item's key and **must return a boolean**.
+     * Function that returns menu items configuration for the header user-menu dropdown (opened by clicking the user avatar next to the theme toggle). Takes an optional
+     * `LoggedUser` object as parameter and returns an array of `MenuItem` objects. Clicks on these items invoke `onMenuClick` with the item's key, but — unlike
+     * `menuItems`/`bottomMenuItems` — never trigger the built-in navigation/logout behavior; the host application is fully responsible for reacting to the click (e.g. opening a
+     * modal).
+     */
+    userMenuItems?: (user?: LoggedUser) => MenuItem[];
+    /**
+     * Function invoked when a menu item is clicked. Receives the item's key.
+     *
+     * For clicks originating from `menuItems`/`bottomMenuItems` (sidebar navigation), the return value controls the built-in behavior:
+     *
+     * - Returning **`false`** cancels the internal action (navigation or logout).
+     * - Returning **`true`** (or any other truthy value) lets the internal processing continue as usual.
      *
-     * - If the callback returns **`false`**, the internal action associated with the click (e.g., navigation, logout) will be **canceled**.
-     * - If it returns **`true`** or any other truthy value, the internal processing will **continue** as usual.
+     * For clicks originating from `userMenuItems` (header user-menu dropdown), there is no built-in action to cancel — the return value is ignored for these clicks.
      */
     onMenuClick?: (key: string) => boolean;
 }
@@ -84,6 +97,11 @@ export interface CodebitConfigProviderProps {
     secondarySidebarWidth?: number;
     /** Function that returns bottom‑menu items. */
     bottomMenuItems?: (user?: LoggedUser) => MenuItem[];
+    /**
+     * Function that returns items for the header user-menu dropdown (e.g. a "Minhas preferências" entry). Clicks on these items invoke `onMenuClick` but never trigger the
+     * built-in navigation/logout behavior — the host application is fully responsible for reacting to the click (e.g. opening a modal).
+     */
+    userMenuItems?: (user?: LoggedUser) => MenuItem[];
     /** Function to handle user logout. */
     doLogout: () => Promise<void>;
     /** Function to check login status and return user data. */
@@ -91,8 +109,12 @@ export interface CodebitConfigProviderProps {
     /**
      * Callback executed when a menu item is clicked. Receives the item's key.
      *
+     * For `menuItems`/`bottomMenuItems` clicks (sidebar navigation):
+     *
      * - Return **`false`** to **prevent** the default internal handling (navigation, logout, etc.).
      * - Return **`true`** (or any truthy value) to allow the default processing to proceed.
+     *
+     * For `userMenuItems` clicks (header user-menu dropdown), the return value is ignored — there is no default action to prevent.
      */
     onMenuClick?: (key: string) => boolean;
 }