46 lines
2.0 KiB
TypeScript
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;
|