@foris/avocado-suite 1.7.0 → 1.8.0

package/dist/components/menu/Menu.d.ts

@@ -18,6 +18,12 @@ interface MenuProps {
     size?: 'sm' | 'md';
     /** Use the variant prop to change the visual style of the Button */
     variant?: ButtonVariant;
+    /**
+     * Callback that is called when the visibility of the menu changes.
+     * Receives a boolean indicating whether the menu list is now visible or not.
+     * Useful for syncing the menu's open state with external state or side effects.
+     */
+    onVisibleChange?: (isVisible: boolean) => void;
 }
 declare const Menu: FC<MenuProps>;
 export default Menu;

package/dist/hooks/useFloatingPortal/index.d.ts

@@ -0,0 +1,2 @@
+export { useFloatingPortal } from './useFloatingPortal';
+export type { FloatingStrategy, FloatingPortalOptions, FloatingPortalPosition, UseFloatingPortalReturn, } from './useFloatingPortal.types';

package/dist/hooks/useFloatingPortal/positionCalculator.d.ts

@@ -0,0 +1,19 @@
+import type { FloatingPortalPosition, FloatingStrategy } from './useFloatingPortal.types';
+interface CalculatePositionParams {
+    referenceRect: DOMRect;
+    floatingRect: DOMRect;
+    strategy: FloatingStrategy;
+    offset: [number, number];
+}
+/**
+ * Calculates the position to center the floating element
+ * on the reference element, applying optional offsets.
+ *
+ * - For `fixed` strategy: uses viewport-relative coordinates.
+ * - For `absolute` strategy: adds page scroll offsets.
+ *
+ * @param params - The reference and floating element rects, strategy, and offset
+ * @returns The calculated `top` and `left` position
+ */
+export declare function calculatePosition(params: CalculatePositionParams): FloatingPortalPosition;
+export {};

package/dist/hooks/useFloatingPortal/useFloatingPortal.d.ts

@@ -0,0 +1,12 @@
+import type { FloatingPortalOptions, UseFloatingPortalReturn } from './useFloatingPortal.types';
+/**
+ * Hook that renders content in a React Portal centered on a reference element.
+ *
+ * Position updates are applied directly to the DOM to avoid React re-renders
+ * during scroll/resize, which prevents child component state loss (e.g., scroll
+ * position inside a Menu, input focus, etc.).
+ *
+ * @param options - Configuration for the floating portal
+ * @returns Refs, position data, a Portal component, and an update function
+ */
+export declare function useFloatingPortal(options?: FloatingPortalOptions): UseFloatingPortalReturn;

package/dist/hooks/useFloatingPortal/useFloatingPortal.types.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+export type FloatingStrategy = 'absolute' | 'fixed';
+export interface FloatingPortalOptions {
+    /**
+     * Custom z-index for the floating element
+     * @default 1000
+     */
+    zIndex?: number;
+    /**
+     * Positioning strategy
+     * @default 'fixed'
+     */
+    strategy?: FloatingStrategy;
+    /**
+     * Offset from the center of the reference element in pixels [x, y]
+     * @default [0, 0]
+     */
+    offset?: [number, number];
+    /**
+     * Whether the floating element is open
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Custom container element to render the portal
+     * @default document.body
+     */
+    portalContainer?: HTMLElement;
+    /**
+     * Callback function when the visibility of the reference element changes (e.g. due to scrolling or resizing)
+     * @param isVisible - `true` if the reference element is visible, `false` otherwise
+     */
+    onIsTargetVisible?: (isVisible: boolean) => void;
+}
+export interface FloatingPortalPosition {
+    top: number;
+    left: number;
+}
+export interface UseFloatingPortalReturn {
+    /**
+     * Ref to attach to the reference/trigger element
+     */
+    referenceRef: React.RefObject<HTMLElement>;
+    /**
+     * Ref to attach to the floating element
+     */
+    floatingRef: React.RefObject<HTMLElement>;
+    /**
+     * Current position styles for the floating element
+     */
+    position: FloatingPortalPosition;
+    /**
+     * Portal component to wrap the floating content
+     */
+    Portal: React.FC<{
+        children: React.ReactNode;
+    }>;
+    /**
+     * Forces a position update
+     */
+    update: () => void;
+}

package/dist/index.d.ts

@@ -56,6 +56,10 @@ import AccessPanel from './components/access-panel/AccessPanel';
 import AccountMenu from './components/account-menu/AccountMenu';
 import Header from './components/header/Header';
 import { toast } from 'react-toastify';
+/**
+ * Hooks
+ */
+export { useFloatingPortal } from './hooks/useFloatingPortal';
 export { Banner, Header, Drawer, AccessPanel, AccountMenu, SidebarMenu, Weekly, WeeklyGroup, Accordion, Box, Breadcrumbs, Button, Card, CardAccordion, CardNotification, Checkbox, DataCard, DataTable, DatePicker, Divider, Donut, DonutLabels, DonutLegend, DropdownButton, Heading, Link, Loading, Menu, Modal, Pager, Pill, PreviewerMarkdown, Processing, ProgressBar, RadioButton, RoundButton, Select, SelectPagination, SkeletonBase, SkeletonCircle, Stepper, Switch, Tabs, Tag, Text, TextField, Textarea, ThemeProvider, ThemeStore, LocaleStore, Timer, Toaster, Tooltip, Table, toast, };
 /**
  * Types
@@ -76,3 +80,7 @@ export type { ModalProps } from './components/modal/Modal';
 export type { PillProps } from './components/Pill/Pill';
 export type { ThemeMode, Theme } from './types/theme.types';
 export * from './types/table.types';
+/**
+ * Hook Types
+ */
+export type { FloatingStrategy, FloatingPortalOptions, FloatingPortalPosition, UseFloatingPortalReturn, } from './hooks/useFloatingPortal';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foris/avocado-suite",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "publishConfig": {
     "access": "public"
   },