Outlook_Addin_LLM/node_modules/@fluentui/react/lib-amd/utilities/useOverflow.d.ts

46 lines
2.0 KiB
TypeScript

import type { RefCallback } from '@fluentui/react-hooks';
/**
* Callback to notify the user that the items in the overflow have changed. This should ensure that the overflow menu
* is visible, and contains all of the overflowing items.
*
* @param overflowIndex - The index of the first item in the overflow, or items.length if nothing is overflowing.
* @param items - The list of all items in the container, and whether that particular item is in the overflow
*/
export type OverflowItemsChangedCallback = (overflowIndex: number, items: {
ele: HTMLElement;
isOverflowing: boolean;
}[]) => void;
/** Parameters for {@see useOverflow} */
export type OverflowParams = {
/** Callback to notify the user that the items in the overflow have changed. */
onOverflowItemsChanged: OverflowItemsChangedCallback;
/** True if the element containing overflowMenuButtonRef is in right-to-left order */
rtl: boolean;
/** Optional: Index of item that should never go into the overflow menu. */
pinnedIndex?: number;
};
/** Return value for {@see useOverflow} */
export type OverflowRefs = {
/** Set the overflow menu button's ref to this ref callback */
menuButtonRef: RefCallback<HTMLElement>;
};
/**
* Track whether any items don't fit within their container, and move them to the overflow menu.
* Items are moved into the overflow menu from back to front, excluding pinned items.
*
* The overflow menu button must be the last sibling of all of the items that can be put into the overflow, and it
* must be hooked up to the `setMenuButtonRef` setter function that's returned by `useOverflow`:
* ```ts
* const overflow = useOverflow(...);
* ```
* ```jsx
* <Container>
* <Item /> // Index 0
* <Item /> // Index 1
* ...
* <Button ref={overflow.setMenuButtonRef} /> // Can be any React.Component or HTMLElement
* </Container>
* ```
*/
export declare const useOverflow: ({ onOverflowItemsChanged, rtl, pinnedIndex }: OverflowParams) => OverflowRefs;