@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
310 lines (309 loc) • 9.79 kB
TypeScript
/**
* MSKCC DSM 2019, 2024
*/
import PropTypes from 'prop-types';
import React, { ComponentType } from 'react';
/**
* @param {Element} menuBody The menu body with the menu arrow.
* @param {string} direction The floating menu direction.
* @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
* @private
*/
export declare const getMenuOffset: (menuBody: any, direction: any, trigger: any, flip: any) => {
left: number;
top: number;
} | undefined;
interface Offset {
top?: number | null | undefined;
left?: number | null | undefined;
}
type IconProps = {
className?: string;
'aria-label'?: string;
};
export interface OverflowMenuProps {
/**
* Specify a label to be read by screen readers on the container node
*/
['aria-label']?: string;
/**
* Deprecated, please use `aria-label` instead.
* Specify a label to be read by screen readers on the container note.
* @deprecated
* */
ariaLabel: string;
/**
* The child nodes.
* */
children: React.ReactNode;
/**
* The CSS class names.
* */
className?: string;
/**
* The menu direction.
*/
direction?: string;
/**
* `true` if the menu alignment should be flipped.
*/
flipped?: boolean;
/**
* Enable or disable focus trap behavior
*/
focusTrap?: boolean;
/**
* The CSS class for the icon.
*/
iconClass?: string;
/**
* The element ID.
*/
id?: string;
/**
* The icon description.
*/
iconDescription?: string;
/**
* `true` to use the light version. For use on $ui-01 backgrounds only.
* Don't use this to make OverflowMenu background color same as container background color.
*/
light?: boolean;
/**
* The adjustment in position applied to the floating menu.
*/
menuOffset?: Offset | (() => void);
/**
* The adjustment in position applied to the floating menu.
*/
menuOffsetFlip?: Offset | (() => void);
/**
* The class to apply to the menu options
*/
menuOptionsClass?: string;
/**
* The event handler for the `click` event.
*/
onClick?: (evt?: any) => void;
/**
* Function called when menu is closed
*/
onClose?: () => void;
/**
* Function called when menu is opened
*/
onOpen?: () => void;
/**
* `true` if the menu should be open.
*/
open?: boolean;
/**
* Function called to override icon rendering.
*/
renderIcon?: ComponentType<IconProps>;
/**
* Specify a CSS selector that matches the DOM element that should
* be focused when the OverflowMenu opens
*/
selectorPrimaryFocus?: string;
/**
* Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
*/
size?: 'sm' | 'md' | 'lg';
/**
* The ref to the HTML element that should receive focus when the OverflowMenu opens
*/
innerRef?: React.Ref<any>;
/**
* Specify whether the tooltip should be disabled
*/
disableTooltip?: boolean;
}
interface OverflowMenuState {
open: boolean;
prevOpen?: boolean;
hasMountedTrigger: boolean;
click: boolean;
}
interface ReleaseHandle {
release: () => null;
}
declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
state: OverflowMenuState;
instanceId: number;
static propTypes: {
/**
* Specify a label to be read by screen readers on the container node
*/
"aria-label": PropTypes.Requireable<string>;
/**
* Deprecated, please use `aria-label` instead.
* Specify a label to be read by screen readers on the container note.
*/
ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
/**
* The child nodes.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* The CSS class names.
*/
className: PropTypes.Requireable<string>;
/**
* The menu direction.
*/
direction: PropTypes.Requireable<string>;
/**
* Specify whether the tooltip should be disabled
*/
disableTooltip: PropTypes.Requireable<boolean>;
/**
* `true` if the menu alignment should be flipped.
*/
flipped: PropTypes.Requireable<boolean>;
/**
* Enable or disable focus trap behavior
*/
focusTrap: PropTypes.Requireable<boolean>;
/**
* The CSS class for the icon.
*/
iconClass: PropTypes.Requireable<string>;
/**
* The icon description.
*/
iconDescription: PropTypes.Requireable<string>;
/**
* The element ID.
*/
id: PropTypes.Requireable<string>;
/**
* `true` to use the light version. For use on $ui-01 backgrounds only.
* Don't use this to make OverflowMenu background color same as container background color.
*/
light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
/**
* The adjustment in position applied to the floating menu.
*/
menuOffset: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
top: PropTypes.Requireable<number>;
left: PropTypes.Requireable<number>;
}> | null | undefined>>;
/**
* The adjustment in position applied to the floating menu.
*/
menuOffsetFlip: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
top: PropTypes.Requireable<number>;
left: PropTypes.Requireable<number>;
}> | null | undefined>>;
/**
* The class to apply to the menu options
*/
menuOptionsClass: PropTypes.Requireable<string>;
/**
* The event handler for the `click` event.
*/
onClick: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Function called when menu is closed
*/
onClose: PropTypes.Requireable<(...args: any[]) => any>;
/**
* The event handler for the `focus` event.
*/
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
/**
* The event handler for the `keydown` event.
*/
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Function called when menu is opened
*/
onOpen: PropTypes.Requireable<(...args: any[]) => any>;
/**
* `true` if the menu should be open.
*/
open: PropTypes.Requireable<boolean>;
/**
* Function called to override icon rendering.
*/
renderIcon: PropTypes.Requireable<object>;
/**
* Specify a CSS selector that matches the DOM element that should
* be focused when the OverflowMenu opens
*/
selectorPrimaryFocus: PropTypes.Requireable<string>;
/**
* Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
*/
size: PropTypes.Requireable<string>;
};
static contextType: React.Context<string>;
/**
* The handle of `onfocusin` or `focus` event handler.
* @private
*/
_hFocusIn: ReleaseHandle | null;
/**
* The timeout handle for handling `blur` event.
* @private
*/
_hBlurTimeout: any;
/**
* The element ref of the tooltip's trigger button.
* @type {React.RefObject<Element>}
* @private
*/
_triggerRef: React.RefObject<unknown>;
componentDidUpdate(_: any, prevState: any): void;
componentDidMount(): void;
static getDerivedStateFromProps({ open }: {
open: any;
}, state: any): {
open: any;
prevOpen: any;
} | null;
componentWillUnmount(): void;
handleClick: (evt: any) => void;
closeMenuAndFocus: () => void;
closeMenuOnEscape: () => void;
handleKeyPress: (evt: any) => void;
handleClickOutside: (evt: any) => void;
closeMenu: (onCloseMenu?: any) => void;
focusMenuEl: () => void;
/**
* Focuses the next enabled overflow menu item given the currently focused
* item index and direction to move
* @param {object} params
* @param {number} params.currentIndex - the index of the currently focused
* overflow menu item in the list of overflow menu items
* @param {number} params.direction - number denoting the direction to move
* focus (1 for forwards, -1 for backwards)
*/
handleOverflowMenuItemFocus: ({ currentIndex, direction }: {
currentIndex: any;
direction: any;
}) => void;
/**
* Handles the floating menu being unmounted or non-floating menu being
* mounted or unmounted.
* @param {Element} menuBody The DOM element of the menu body.
* @private
*/
_menuBody: HTMLElement | null;
_bindMenuBody: (menuBody: HTMLElement | null) => void;
/**
* Handles the floating menu being placed.
* @param {Element} menuBody The DOM element of the menu body.
* @private
*/
_handlePlace: (menuBody: any) => void;
/**
* @returns {Element} The DOM element where the floating menu is placed in.
*/
_getTarget: () => Element;
render(): JSX.Element;
}
export { OverflowMenu };
declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
export default _default;