@kubit-ui-web/react-components/dist/esm/components/actionBottomSheet/actionBottomSheetStandAlone.js

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

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { Link } from '../link/link';
import { ActionBottomSheetActionStyled, ActionBottomSheetContentStyled, ActionBottomSheetControlStyled, ActionBottomSheetHeaderContentStyled, ActionBottomSheetHeaderStyled, ActionBottomSheetIconSyled, ActionBottomSheetStyled, ActionBottomSheetTitleSyled, DraggableIcon, } from './actionBottomSheet.styled';
const ActionBottomSheetStandAloneComponent = ({ dataTestId = 'action-bottom-sheet', hasHeader = true, scrollableRef, shadowRef, ...props }, ref) => {
    // Parent container Ref
    const actionBottomRef = React.useRef(null);
    // Expose the ref to the parent component
    React.useImperativeHandle(ref, () => {
        return actionBottomRef.current;
    }, []);
    // Set the parent componente ref for the scrollableRef function
    React.useEffect(() => {
        scrollableRef(actionBottomRef.current);
    }, []);
    const isMobileOrTablet = [DeviceBreakpointsType.MOBILE, DeviceBreakpointsType.TABLET].includes(props.device);
    return (_jsxs(ActionBottomSheetStyled, { ref: actionBottomRef, "$height": props.height, "data-testid": dataTestId, styles: props.styles.container, children: [props.dragIcon && isMobileOrTablet && (_jsx(DraggableIcon, { ref: props.dragIconRef, "data-drag-icon": true, styles: props.styles, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.dragIcon, ...props.dragIcon }) })), hasHeader && (_jsxs(_Fragment, { children: [_jsxs(ActionBottomSheetControlStyled, { ref: shadowRef, styles: props.styles.controlContainer, children: [_jsx(ActionBottomSheetActionStyled, { styles: props.styles.actionLinkContainer, children: props.actionLink && _jsx(Link, { ...props.actionLink }) }), _jsx(ActionBottomSheetIconSyled, { styles: props.styles.closeIconContainer, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.closeIcon, ...props.closeIcon }) })] }), _jsxs(ActionBottomSheetHeaderStyled, { styles: props.styles.header, children: [_jsx(ActionBottomSheetTitleSyled, { styles: props.styles, children: _jsx(Text, { component: TextComponentType.H5, customTypography: props.styles.title, ...props.title, children: props.title?.content }) }), props.headerContent && (_jsx(ActionBottomSheetHeaderContentStyled, { styles: props.styles, children: props.headerContent }))] })] })), _jsx(ActionBottomSheetContentStyled, { styles: props.styles.content, children: props.children })] }));
};
export const ActionBottomSheetStandAlone = React.forwardRef(ActionBottomSheetStandAloneComponent);
//# sourceMappingURL=actionBottomSheetStandAlone.js.map