@kubit-ui-web/react-components/dist/cjs/components/functionalitiesModule/functionalitiesModuleStandAlone.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.FunctionalitiesModuleStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const button_1 = require("../../components/button/button");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const positions_1 = require("../../types/positions/positions");
const actionBottomSheetControlled_1 = require("../actionBottomSheet/actionBottomSheetControlled");
const listOptions_1 = require("../listOptions/listOptions");
const type_1 = require("../listOptions/types/type");
const tabsUnControlled_1 = require("../tabs/tabsUnControlled");
const component_1 = require("../text/types/component");
// styles
const functionalitiesModule_styled_1 = require("./functionalitiesModule.styled");
const FunctionalitiesModuleStandAloneComponent = ({ hasTitleSection = false, dataTestId = 'functionalities-module', ...props }, ref) => {
    const mergeList = () => {
        return (props.sections?.reduce((prev, current) => {
            const currentOptions = current.options ? current.options : [];
            return [...prev, ...currentOptions];
        }, []) ?? []);
    };
    const buildContentMergeList = () => [
        (0, jsx_runtime_1.jsx)(functionalitiesModule_styled_1.ContentContainerStyled, { "data-testid": `${dataTestId}-content-tab`, styles: props.styles, children: props.styles.listOptions?.optionVariant && props.styles.listOptions.variant && ((0, jsx_runtime_1.jsx)(listOptions_1.ListOptions, { optionVariant: props.styles.listOptions.optionVariant, options: mergeList(), selectedValue: props.selectedValue, type: type_1.ListOptionsType.NAVIGATION, variant: props.styles.listOptions.variant, onOptionClick: props.onOptionClick })) }, 0),
    ];
    const buildContentList = () => props.sections?.map((section, index) => {
        return ((0, jsx_runtime_1.jsx)(functionalitiesModule_styled_1.ContentContainerStyled, { "data-testid": `${dataTestId}-content-tab-${index}`, styles: props.styles, children: props.styles.listOptions?.optionVariant && props.styles.listOptions.variant && ((0, jsx_runtime_1.jsx)(listOptions_1.ListOptions, { content: section.optionsContent, optionVariant: props.styles.listOptions.optionVariant, options: section.options || [], selectedValue: props.selectedValue, title: { component: component_1.TextComponentType.H6, ...section.optionsTitle }, type: type_1.ListOptionsType.NAVIGATION, variant: props.styles.listOptions.variant, onOptionClick: props.onOptionClick })) }, index));
    });
    const content = hasTitleSection || props.device === breakpoints_1.DeviceBreakpointsType.DESKTOP
        ? buildContentList()
        : buildContentMergeList();
    const { title: actionBottomSheetTitle, popover: actionBottomSheetPopover, ...actionBottomSheet } = props.actionBottomSheet ?? {};
    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: props.device === breakpoints_1.DeviceBreakpointsType.DESKTOP ? ((0, jsx_runtime_1.jsx)(functionalitiesModule_styled_1.TabsContainerStyled, { ref: ref, "aria-label": props.tabsContainerAriaLabel, "data-testid": `${dataTestId}-tabs`, styles: props.styles, children: (0, jsx_runtime_1.jsx)(tabsUnControlled_1.TabsUnControlled, { allowFocusTabPanel: false, content: content, tabs: props.sections?.map(({ tab }) => tab), variant: props.styles.tabsVariant, ...props.tabsConfig }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.trigger?.content && ((0, jsx_runtime_1.jsx)(functionalitiesModule_styled_1.ButtonContainerStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...props.trigger, children: props.trigger?.content }) })), (0, jsx_runtime_1.jsx)(functionalitiesModule_styled_1.ActionBottomSheetContainerStyled, { styles: props.styles, children: props.styles.actionBottomSheet?.variant && ((0, jsx_runtime_1.jsx)(actionBottomSheetControlled_1.ActionBottomSheetControlled, { open: props.open ?? false, popover: {
                            preventScrollOnCloseFocus: true,
                            blockBack: true,
                            ...actionBottomSheetPopover,
                        }, title: {
                            align: props.styles.actionBottomSheet.alignTitle ?? positions_1.POSITIONS.CENTER,
                            component: component_1.TextComponentType.H5,
                            ...actionBottomSheetTitle,
                        }, variant: props.styles.actionBottomSheet.variant, ...actionBottomSheet, children: content })) })] })) }));
};
exports.FunctionalitiesModuleStandAlone = react_1.default.forwardRef(FunctionalitiesModuleStandAloneComponent);
//# sourceMappingURL=functionalitiesModuleStandAlone.js.map