@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
78 lines • 5.83 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionBottomSheetControlled = exports.ActionBottomSheetControlledStructure = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const stylesName_1 = require("../../constants/stylesName/stylesName");
const useDeviceHeight_1 = require("../../hooks/useDeviceHeight/useDeviceHeight");
const useId_1 = require("../../hooks/useId/useId");
const useMediaDevice_1 = require("../../hooks/useMediaDevice/useMediaDevice");
const useScrollEffect_1 = require("../../hooks/useScrollEffect/useScrollEffect");
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const useSwipeDown_1 = require("../../hooks/useSwipeDown/useSwipeDown");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const role_1 = require("../../types/role/role");
const popoverControlled_1 = require("../popover/popoverControlled");
const component_1 = require("../popover/types/component");
const actionBottomSheetStandAlone_1 = require("./actionBottomSheetStandAlone");
const SCROLL_DISTANCE = 5;
const ActionBottomSheetControlledStructureComponent = react_1.default.forwardRef(({ variant, ctv, ...props }, ref) => {
(0, useDeviceHeight_1.useDeviceHeight)();
const styles = (0, useStyles_1.useStyles)(stylesName_1.STYLES_NAME.ACTION_BOTTOM_SHEET, variant, ctv);
const device = (0, useMediaDevice_1.useMediaDevice)();
const conditional = react_1.default.useMemo(() => device !== breakpoints_1.DeviceBreakpointsType.DESKTOP && device !== breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP, [device]);
const { scrollableRef, shadowRef } = (0, useScrollEffect_1.useScrollEffect)({
conditional,
shadowStyles: styles.controlContainer?.[device]?.box_shadow,
shadowVisible: SCROLL_DISTANCE,
});
return ((0, jsx_runtime_1.jsx)(actionBottomSheetStandAlone_1.ActionBottomSheetStandAlone, { ...props, ref: ref, device: device, scrollableRef: scrollableRef, shadowRef: shadowRef, styles: styles }));
});
ActionBottomSheetControlledStructureComponent.displayName =
'ActionBottomSheetControlledStructureComponent';
const ActionBottomSheetControlledStructureComponentBoundary = (props, ref) => ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(fallbackComponent_1.FallbackComponent, { children: (0, jsx_runtime_1.jsx)(actionBottomSheetStandAlone_1.ActionBottomSheetStandAlone, { ...props, ref: ref }) }), children: (0, jsx_runtime_1.jsx)(ActionBottomSheetControlledStructureComponent, { ...props, ref: ref }) }));
exports.ActionBottomSheetControlledStructure = react_1.default.forwardRef(ActionBottomSheetControlledStructureComponentBoundary);
const ActionBottomSheetControlledComponent = react_1.default.forwardRef(({ open, title, popover, blocked = false, ...props }, ref) => {
const uniqueTitleId = (0, useId_1.useId)('actionSheet-title');
const titleId = (title?.id ?? title?.content) ? uniqueTitleId : undefined;
const styles = (0, useStyles_1.useStyles)(stylesName_1.STYLES_NAME.ACTION_BOTTOM_SHEET, props.variant, props.ctv);
const innerRef = react_1.default.useRef(null);
react_1.default.useImperativeHandle(ref, () => {
return innerRef.current;
}, []);
const { setPopoverRef, setDragIconRef } = (0, useSwipeDown_1.useSwipeDown)(popover?.animationOptions, popover?.onCloseInternally);
const setInnerRef = react_1.default.useCallback(node => {
innerRef.current = node;
const dragIcon = innerRef.current?.querySelector('[data-drag-icon]');
if (dragIcon instanceof HTMLElement) {
setDragIconRef(dragIcon);
}
}, []);
return ((0, jsx_runtime_1.jsx)(popoverControlled_1.PopoverControlled, { "aria-labelledby": titleId, "aria-modal": true, clickOverlayClose: !blocked, component: component_1.PopoverComponentType.DIV, dataTestId: `${props.dataTestId}Popover`, forwardedRef: setPopoverRef, hasBackDrop: true, open: open, role: role_1.ROLES.DIALOG, trapFocusInsideModal: true, variant: styles.popoverVariant, ...popover, children: (0, jsx_runtime_1.jsx)(exports.ActionBottomSheetControlledStructure, { ...props, ref: setInnerRef, title: { ...title, id: titleId } }) }));
});
ActionBottomSheetControlledComponent.displayName = 'ActionBottomSheetControlledComponent';
const ActionBottomSheetControlledComponentBoundary = (props, ref) => ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(fallbackComponent_1.FallbackComponent, { children: (0, jsx_runtime_1.jsx)(exports.ActionBottomSheetControlledStructure, { ...props, ref: ref }) }), children: (0, jsx_runtime_1.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_1.default.forwardRef(ActionBottomSheetControlledComponentBoundary);
exports.ActionBottomSheetControlled = ActionBottomSheetControlled;
//# sourceMappingURL=actionBottomSheetControlled.js.map