@kubit-ui-web/react-components/dist/cjs/components/oliveMenu/oliveMenuStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OliveMenuStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const actionBottomSheetControlled_1 = require("../../components/actionBottomSheet/actionBottomSheetControlled");
const button_1 = require("../../components/button/button");
const useId_1 = require("../../hooks/useId/useId");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const role_1 = require("../../types/role/role");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
const listOptions_1 = require("../listOptions/listOptions");
const type_1 = require("../listOptions/types/type");
const popoverControlled_1 = require("../popover/popoverControlled");
const component_1 = require("../popover/types/component");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
const component_2 = require("../text/types/component");
const oliveMenu_styled_1 = require("./oliveMenu.styled");
const getAriaControls_1 = require("./utils/getAriaControls");
const OliveMenuStandAloneComponent = ({ dataTestId = 'olive-menu', ...props }, ref) => {
    const uniqueId = (0, useId_1.useId)('oliveMenu');
    const buttonRef = react_1.default.useRef(null);
    const ariaControls = `${uniqueId}List`;
    const popoverAsModal = [breakpoints_1.DeviceBreakpointsType.MOBILE, breakpoints_1.DeviceBreakpointsType.TABLET].includes(props.device);
    const { title: actionBottomSheetTitle, ...actionBottomSheet } = props.actionBottomSheetStructure ?? {};
    const titleId = actionBottomSheetTitle?.id ?? `${uniqueId}Title`;
    const ariaControlIds = (0, getAriaControls_1.getAriaControls)(props.sections, ariaControls);
    return ((0, jsx_runtime_1.jsxs)(oliveMenu_styled_1.OliveMenuStyled, { ref: ref, "data-testid": dataTestId, styles: props.styles, onBlur: props.onBlur, children: [props.trigger?.content &&
                (props.styles.button?.[props.device]?.size || props.trigger?.size) && ((0, jsx_runtime_1.jsx)(oliveMenu_styled_1.ButtonContainer, { ref: buttonRef, styles: props.styles, children: (0, jsx_runtime_1.jsx)(button_1.Button, { "aria-controls": props.open ? ariaControlIds?.join(' ') : undefined, "aria-expanded": props.open, size: props.styles.button?.[props.device]?.size, ...props.trigger, children: props.trigger?.content }) })), (0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { ariaLive: ariaLiveOption_1.AriaLiveOptionType.POLITE, children: props.screenReaderText }), (0, jsx_runtime_1.jsx)(popoverControlled_1.PopoverControlled, { "aria-labelledby": popoverAsModal ? titleId : undefined, "aria-modal": popoverAsModal ? props.open : undefined, clickOverlayClose: true, component: component_1.PopoverComponentType.DIV, extraAlignGap: props.styles.buttonContainer?.[props.device]?.margin_bottom, focusFirstDescendantAutomatically: popoverAsModal, focusLastElementFocusedAfterClose: popoverAsModal, hasBackDrop: true, open: props.open, 
                // It is handled internally by the controlled component to allow close when the focus is on the button
                pressEscapeClose: false, preventCloseOnClickElements: [buttonRef.current], role: popoverAsModal ? role_1.ROLES.DIALOG : undefined, trapFocusInsideModal: popoverAsModal, variant: props.styles.popoverVariant, ...props.popover, children: (0, jsx_runtime_1.jsx)(actionBottomSheetControlled_1.ActionBottomSheetControlledStructure, { ref: actionBottomSheet.forwardedRef, title: {
                        component: component_2.TextComponentType.H5,
                        align: props.styles.actionBottomSheet?.[props.device]?.alignTitle,
                        ...actionBottomSheetTitle,
                        id: titleId,
                    }, variant: props.styles.actionBottomSheet?.variant, ...actionBottomSheet, children: (0, jsx_runtime_1.jsx)(oliveMenu_styled_1.ListboxStyled, { styles: props.styles, children: props.styles.listOptions?.optionVariant &&
                            props.styles.listOptions?.variant &&
                            props.sections?.map(({ title, ...section }, index) => ((0, jsx_runtime_1.jsx)(listOptions_1.ListOptions, { optionVariant: props.styles.listOptions?.optionVariant, selectedValue: props.selectedValue, title: { component: component_2.TextComponentType.H6, ...title }, type: type_1.ListOptionsType.NAVIGATION, variant: props.styles.listOptions?.variant, onOptionClick: props.onOptionClick, ...section, id: ariaControlIds?.[index] }, section.id))) }) }) })] }));
};
exports.OliveMenuStandAlone = react_1.default.forwardRef(OliveMenuStandAloneComponent);
//# sourceMappingURL=oliveMenuStandAlone.js.map