@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
72 lines • 4.79 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { STYLES_NAME } from '../../constants/stylesName/stylesName';
import { useDeviceHeight } from '../../hooks/useDeviceHeight/useDeviceHeight';
import { useId } from '../../hooks/useId/useId';
import { useMediaDevice } from '../../hooks/useMediaDevice/useMediaDevice';
import { useScrollEffect } from '../../hooks/useScrollEffect/useScrollEffect';
import { useStyles } from '../../hooks/useStyles/useStyles';
import { useSwipeDown } from '../../hooks/useSwipeDown/useSwipeDown';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { ROLES } from '../../types/role/role';
import { PopoverControlled } from '../popover/popoverControlled';
import { PopoverComponentType } from '../popover/types/component';
import { ActionBottomSheetStandAlone } from './actionBottomSheetStandAlone';
const SCROLL_DISTANCE = 5;
const ActionBottomSheetControlledStructureComponent = React.forwardRef(({ variant, ctv, ...props }, ref) => {
useDeviceHeight();
const styles = useStyles(STYLES_NAME.ACTION_BOTTOM_SHEET, variant, ctv);
const device = useMediaDevice();
const conditional = React.useMemo(() => device !== DeviceBreakpointsType.DESKTOP && device !== DeviceBreakpointsType.LARGE_DESKTOP, [device]);
const { scrollableRef, shadowRef } = useScrollEffect({
conditional,
shadowStyles: styles.controlContainer?.[device]?.box_shadow,
shadowVisible: SCROLL_DISTANCE,
});
return (_jsx(ActionBottomSheetStandAlone, { ...props, ref: ref, device: device, scrollableRef: scrollableRef, shadowRef: shadowRef, styles: styles }));
});
ActionBottomSheetControlledStructureComponent.displayName =
'ActionBottomSheetControlledStructureComponent';
const ActionBottomSheetControlledStructureComponentBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(ActionBottomSheetStandAlone, { ...props, ref: ref }) }), children: _jsx(ActionBottomSheetControlledStructureComponent, { ...props, ref: ref }) }));
export const ActionBottomSheetControlledStructure = React.forwardRef(ActionBottomSheetControlledStructureComponentBoundary);
const ActionBottomSheetControlledComponent = React.forwardRef(({ open, title, popover, blocked = false, ...props }, ref) => {
const uniqueTitleId = useId('actionSheet-title');
const titleId = (title?.id ?? title?.content) ? uniqueTitleId : undefined;
const styles = useStyles(STYLES_NAME.ACTION_BOTTOM_SHEET, props.variant, props.ctv);
const innerRef = React.useRef(null);
React.useImperativeHandle(ref, () => {
return innerRef.current;
}, []);
const { setPopoverRef, setDragIconRef } = useSwipeDown(popover?.animationOptions, popover?.onCloseInternally);
const setInnerRef = React.useCallback(node => {
innerRef.current = node;
const dragIcon = innerRef.current?.querySelector('[data-drag-icon]');
if (dragIcon instanceof HTMLElement) {
setDragIconRef(dragIcon);
}
}, []);
return (_jsx(PopoverControlled, { "aria-labelledby": titleId, "aria-modal": true, clickOverlayClose: !blocked, component: PopoverComponentType.DIV, dataTestId: `${props.dataTestId}Popover`, forwardedRef: setPopoverRef, hasBackDrop: true, open: open, role: ROLES.DIALOG, trapFocusInsideModal: true, variant: styles.popoverVariant, ...popover, children: _jsx(ActionBottomSheetControlledStructure, { ...props, ref: setInnerRef, title: { ...title, id: titleId } }) }));
});
ActionBottomSheetControlledComponent.displayName = 'ActionBottomSheetControlledComponent';
const ActionBottomSheetControlledComponentBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(ActionBottomSheetControlledStructure, { ...props, ref: ref }) }), children: _jsx(ActionBottomSheetControlledComponent, { ...props, ref: ref }) }));
/**
* @description
* ActionBottomSheetControlled component is a controlled action bottom sheet, that use a Popover component to show the content.
* @param {React.PropsWithChildren<IActionBottomSheetControlled<V>>} props
* @returns {JSX.Element}
* @example
* <ActionBottomSheetControlled
* open={open}
* onCloseIconClick={onCloseIconClick}
* onPopoverCloseInternally={handleOnPopoverCloseInternally}
* title="Title"
* >
* <div>Content</div>
* </ActionBottomSheetControlled>
*
*/
const ActionBottomSheetControlled = React.forwardRef(ActionBottomSheetControlledComponentBoundary);
export { ActionBottomSheetControlled };
//# sourceMappingURL=actionBottomSheetControlled.js.map