@gravityforms/components/react/admin/modules/Dropdown/DropdownPopover.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, PropTypes, classnames } from '@gravityforms/libraries';
import { useIdContext, useStoreContext } from '@gravityforms/react-utils';
import { getId } from './utils';

const { forwardRef } = React;

/**
 * @module DropdownPopover
 * @description The popover component for the dropdown.
 *
 * @since 4.5.0
 *
 * @param {object}              props                      The component props.
 * @param {JSX.Element}         props.children             The children of the component.
 * @param {Function}            props.handleBlur           The blur event handler.
 * @param {Function}            props.handleEscKeyDown     The escape key down event handler.
 * @param {Function}            props.handleKeyDownCapture The key down capture event handler.
 * @param {Function}            props.handleListKeyDown    The list key down event handler.
 * @param {object}              props.popoverAttributes    The popover attributes.
 * @param {string|Array|object} props.popoverClasses       The popover classes.
 * @param {number}              props.popoverMaxHeight     The popover max height.
 * @param {object}              ref                        The ref object.
 *
 * @return {JSX.Element} The popover component.
 */
const DropdownPopover = forwardRef( ( {
	children = null,
	handleBlur = () => {},
	handleEscKeyDown = () => {},
	handleKeyDownCapture = () => {},
	handleListKeyDown = () => {},
	popoverAttributes = {},
	popoverClasses = [],
	popoverMaxHeight = 0,
}, ref ) => {
	const id = useIdContext();
	const dropdownOpen = useStoreContext( ( state ) => state.open );

	const popoverId = getId( id, 'popover' );

	const popoverProps = {
		className: classnames( {
			'gform-dropdown__popover': true,
		}, popoverClasses ),
		...popoverAttributes,
		'data-dialog': true,
		id: popoverId,
		onBlur: handleBlur,
		onKeyDown: ( event ) => {
			handleEscKeyDown( event );
			handleListKeyDown( event );
		},
		onKeyDownCapture: ( event ) => handleKeyDownCapture( event ),
		role: 'dialog',
		tabIndex: '-1',
	};
	if ( ! dropdownOpen ) {
		popoverProps.hidden = true;
	}
	if ( popoverMaxHeight ) {
		popoverProps.style = {
			maxHeight: `${ popoverMaxHeight }px`,
		};
	}
	return (
		<div className="gform-dropdown__popover-wrapper">
			<div { ...popoverProps } ref={ ref }>
				{ children }
			</div>
		</div>
	);
} );

DropdownPopover.propTypes = {
	children: PropTypes.node,
	handleBlur: PropTypes.func,
	handleEscKeyDown: PropTypes.func,
	handleKeyDownCapture: PropTypes.func,
	handleListKeyDown: PropTypes.func,
	popoverAttributes: PropTypes.object,
	popoverClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	popoverMaxHeight: PropTypes.number,
};

export default DropdownPopover;