@linzjs/step-ag-grid
Version:
[](https://github.com/semantic-release/semantic-release) > Reusable [ag-grid](https://www.ag-grid.com/) component for LINZ / Toitū te whenua.
111 lines (110 loc) • 4.32 kB
TypeScript
import { CSSProperties, ReactNode } from 'react';
import { BaseProps, ClassNameProp, Hoverable, MenuAlign, MenuArrowModifiers, MenuDirection, MenuModifiers, MenuOverflow, MenuPosition, RenderProp, UncontrolledMenuProps } from '../types';
import { withHoveringResultProps } from '../utils/withHovering';
export type SubMenuItemModifiers = Readonly<{
/**
* Indicates if the submenu is open.
*/
open: boolean;
/**
* Indicates if the submenu item is being hovered and has focus.
*/
hover: boolean;
/**
* Indicates if the submenu and item are disabled.
*/
disabled: boolean;
}>;
/**
* Common props for `Menu`, `SubMenu` and `ControlledMenu`
*/
interface BaseMenuProps extends Omit<BaseProps, 'style'> {
/**
* Can be a string or a function which receives a modifier object and returns a CSS `class` string.
*/
menuClassName?: ClassNameProp<MenuModifiers>;
/**
* This prop is forwarded to the `style` prop of menu DOM element.
*/
menuStyle?: CSSProperties;
/**
* Can be a string or a function which receives a modifier object and returns a CSS `class` string.
*/
arrowClassName?: ClassNameProp<MenuArrowModifiers>;
/**
* This prop is forwarded to the `style` prop of menu arrow DOM element.
*/
arrowStyle?: CSSProperties;
/**
* Set `true` to display an arrow pointing to its anchor element.
*/
arrow?: boolean;
/**
* Set the horizontal distance (in pixels) between menu and its anchor element.
* The value can be negative.
* @default 0
*/
offsetX?: number;
/**
* Set the vertical distance (in pixels) between menu and its anchor element.
* The value can be negative.
* @default 0
*/
offsetY?: number;
/**
* Set alignment of menu with anchor element.
* @default 'start'
*/
align?: MenuAlign;
/**
* Set direction in which menu expands against anchor element.
* @default 'bottom'
*/
direction?: MenuDirection;
/**
* Set the position of menu related to its anchor element:
*
* - 'auto' menu position is adjusted to have it contained within the viewport,
* even if it will be detached from the anchor element.
* This option allows to display menu in the viewport as much as possible.
*
* - 'anchor' menu position is adjusted to have it contained within the viewport,
* but it will be kept attached to the edges of anchor element.
*
* - 'initial' menu always stays at its initial position.
* @default 'auto'
*/
position?: MenuPosition;
/**
* Make the menu list scrollable or hidden when there is not enough viewport space to
* display all menu items. The prop is similar to the CSS `overflow` property.
* @default 'visible'
*/
overflow?: MenuOverflow;
/**
* Set computed overflow amount down to a child `MenuGroup`.
* The `MenuGroup` should have `takeOverflow` prop set as `true` accordingly.
*/
setDownOverflow?: boolean;
children?: ReactNode;
}
export interface SubMenuProps extends BaseMenuProps, Hoverable, UncontrolledMenuProps, withHoveringResultProps {
/**
* Properties of this object are spread to the submenu item DOM element.
*/
itemProps?: BaseProps<SubMenuItemModifiers>;
/**
* The submenu `label` can be a `string` or JSX element, or a render function that returns one.
*/
label?: RenderProp<SubMenuItemModifiers>;
/**
* - `undefined` submenu opens when the label item is hovered or clicked. This is the default behaviour.
* - 'clickOnly' submenu opens when the label item is clicked.
* - 'none' submenu doesn't open with mouse or keyboard events;
* you can call the `openMenu` function on `instanceRef` to open submenu programmatically.
*/
openTrigger?: 'none' | 'clickOnly';
}
export declare const SubMenuFr: ({ "aria-label": ariaLabel, className, disabled, direction, label, openTrigger, onMenuChange, isHovering, instanceRef, menuItemRef, itemProps, ...restProps }: SubMenuProps) => import("react/jsx-runtime").JSX.Element;
export declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<SubMenuProps, "ref"> & import("react").RefAttributes<any>>;
export {};