@elastic/eui
Version:
Elastic UI Component Library
69 lines (63 loc) • 3.45 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["titleId"];
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { useGeneratedHtmlId } from '../../services';
import { MENU_DISPLAY_ALWAYS, MENU_DISPLAY_AUTO } from './const';
import { useMemo } from 'react';
import classnames from 'classnames';
/**
* @internal
*/
/**
* Hook to manage flyout menu state and rendering logic.
* Determines whether the menu should be rendered based on display mode
* and menu content, and computes the appropriate aria-labelledby value.
*
* @internal
*/
export var useEuiFlyoutMenu = function useEuiFlyoutMenu(_ref) {
var _flyoutMenuProps$hist, _flyoutMenuProps$hist2, _flyoutMenuProps$cust, _flyoutMenuProps$cust2;
var _flyoutMenuProps = _ref.flyoutMenuProps,
flyoutMenuDisplayMode = _ref.flyoutMenuDisplayMode,
_ariaLabelledBy = _ref.ariaLabelledBy;
var generatedMenuId = useGeneratedHtmlId();
var _ref2 = _flyoutMenuProps || {},
_titleId = _ref2.titleId,
flyoutMenuProps = _objectWithoutProperties(_ref2, _excluded);
var hasMenu = !!_flyoutMenuProps;
var flyoutMenuId = useMemo(function () {
if (!hasMenu) return undefined;
return _titleId || generatedMenuId;
}, [hasMenu, _titleId, generatedMenuId]);
// Determine if the menu has any content
// hasBackButton or hasHistory or hasCustomActions or hasVisibleTitle or hasPagination
var menuHasContent = hasMenu && (!!flyoutMenuProps.showBackButton || ((_flyoutMenuProps$hist = (_flyoutMenuProps$hist2 = flyoutMenuProps.historyItems) === null || _flyoutMenuProps$hist2 === void 0 ? void 0 : _flyoutMenuProps$hist2.length) !== null && _flyoutMenuProps$hist !== void 0 ? _flyoutMenuProps$hist : 0) > 0 || ((_flyoutMenuProps$cust = (_flyoutMenuProps$cust2 = flyoutMenuProps.customActions) === null || _flyoutMenuProps$cust2 === void 0 ? void 0 : _flyoutMenuProps$cust2.length) !== null && _flyoutMenuProps$cust !== void 0 ? _flyoutMenuProps$cust : 0) > 0 ||
// Component defaults to hiding the title, so only explicit false means the title will be visible
!!(flyoutMenuProps.title && flyoutMenuProps.hideTitle === false) || !!(flyoutMenuProps.pagination && flyoutMenuProps.pagination.total > 1));
// Determine if the menu should be rendered based on the display mode and menu content
var shouldRenderMenu = useMemo(function () {
if (!hasMenu) return false;
if (flyoutMenuDisplayMode === MENU_DISPLAY_ALWAYS) return true;
if (flyoutMenuDisplayMode === MENU_DISPLAY_AUTO) return menuHasContent;
return false;
}, [hasMenu, flyoutMenuDisplayMode, menuHasContent]);
// If the flyout menu is to be rendered, ensure the flyout has aria-labelledby referencing the menu's titleId
var ariaLabelledBy = useMemo(function () {
if (flyoutMenuId && shouldRenderMenu) {
return classnames(flyoutMenuId, _ariaLabelledBy);
}
return _ariaLabelledBy;
}, [flyoutMenuId, _ariaLabelledBy, shouldRenderMenu]);
return {
flyoutMenuId: flyoutMenuId,
flyoutMenuProps: flyoutMenuProps,
shouldRenderMenu: shouldRenderMenu,
ariaLabelledBy: ariaLabelledBy
};
};