@kubit-ui-web/react-components/dist/cjs/components/actionBottomSheet/actionBottomSheetStandAlone.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.ActionBottomSheetStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const link_1 = require("../link/link");
const actionBottomSheet_styled_1 = require("./actionBottomSheet.styled");
const ActionBottomSheetStandAloneComponent = ({ dataTestId = 'action-bottom-sheet', hasHeader = true, scrollableRef, shadowRef, ...props }, ref) => {
    // Parent container Ref
    const actionBottomRef = react_1.default.useRef(null);
    // Expose the ref to the parent component
    react_1.default.useImperativeHandle(ref, () => {
        return actionBottomRef.current;
    }, []);
    // Set the parent componente ref for the scrollableRef function
    react_1.default.useEffect(() => {
        scrollableRef(actionBottomRef.current);
    }, []);
    const isMobileOrTablet = [breakpoints_1.DeviceBreakpointsType.MOBILE, breakpoints_1.DeviceBreakpointsType.TABLET].includes(props.device);
    return ((0, jsx_runtime_1.jsxs)(actionBottomSheet_styled_1.ActionBottomSheetStyled, { ref: actionBottomRef, "$height": props.height, "data-testid": dataTestId, styles: props.styles.container, children: [props.dragIcon && isMobileOrTablet && ((0, jsx_runtime_1.jsx)(actionBottomSheet_styled_1.DraggableIcon, { ref: props.dragIconRef, "data-drag-icon": true, styles: props.styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.dragIcon, ...props.dragIcon }) })), hasHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(actionBottomSheet_styled_1.ActionBottomSheetControlStyled, { ref: shadowRef, styles: props.styles.controlContainer, children: [(0, jsx_runtime_1.jsx)(actionBottomSheet_styled_1.ActionBottomSheetActionStyled, { styles: props.styles.actionLinkContainer, children: props.actionLink && (0, jsx_runtime_1.jsx)(link_1.Link, { ...props.actionLink }) }), (0, jsx_runtime_1.jsx)(actionBottomSheet_styled_1.ActionBottomSheetIconSyled, { styles: props.styles.closeIconContainer, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.closeIcon, ...props.closeIcon }) })] }), (0, jsx_runtime_1.jsxs)(actionBottomSheet_styled_1.ActionBottomSheetHeaderStyled, { styles: props.styles.header, children: [(0, jsx_runtime_1.jsx)(actionBottomSheet_styled_1.ActionBottomSheetTitleSyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.H5, customTypography: props.styles.title, ...props.title, children: props.title?.content }) }), props.headerContent && ((0, jsx_runtime_1.jsx)(actionBottomSheet_styled_1.ActionBottomSheetHeaderContentStyled, { styles: props.styles, children: props.headerContent }))] })] })), (0, jsx_runtime_1.jsx)(actionBottomSheet_styled_1.ActionBottomSheetContentStyled, { styles: props.styles.content, children: props.children })] }));
};
exports.ActionBottomSheetStandAlone = react_1.default.forwardRef(ActionBottomSheetStandAloneComponent);
//# sourceMappingURL=actionBottomSheetStandAlone.js.map