@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
89 lines • 4.74 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OliveMenu = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useEscPressedV2_1 = require("../../hooks/useEscPressedV2/useEscPressedV2");
const useMediaDevice_1 = require("../../hooks/useMediaDevice/useMediaDevice");
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 oliveMenuStandAlone_1 = require("./oliveMenuStandAlone");
const OLIVE_MENU_STYLES = 'OLIVE_MENU_STYLES';
const OliveMenuComponent = react_1.default.forwardRef(({ variant, ctv, trigger, actionBottomSheetStructure, onOpenClose, ...props }, ref) => {
const [open, setOpen] = react_1.default.useState(false);
const styles = (0, useStyles_1.useStyles)(OLIVE_MENU_STYLES, variant, ctv);
const device = (0, useMediaDevice_1.useMediaDevice)();
const innerRef = react_1.default.useRef(null);
const actionBottomSheetRef = react_1.default.useRef(null);
react_1.default.useImperativeHandle(ref, () => innerRef.current, []);
const handlePressScape = react_1.default.useCallback(() => {
// Do nothing if already closed
if (!open) {
return;
}
setOpen(false);
onOpenClose?.(false);
// Focus the trigger button since its not handled automatically by the popover
// and the focus in inside the component that is going to be closed
const trigger = innerRef.current?.querySelector('button');
trigger?.focus();
}, [open]);
// It is handled internally by the component to allow close when the focus is on the button
(0, useEscPressedV2_1.useEscPressedV2)({ ref: innerRef, onEscPress: handlePressScape });
const handleTriggerClick = e => {
setOpen(!open);
onOpenClose?.(!open, e);
trigger?.onClick?.(e);
};
const handleCloseIconClick = e => {
setOpen(false);
onOpenClose?.(false, e);
actionBottomSheetStructure?.closeIcon?.onClick?.(e);
};
const handleCloseInternally = () => {
setOpen(false);
onOpenClose?.(false);
props.popover?.onCloseInternally?.();
};
const handleBlur = e => {
// Do nothing if:
// * Is device with popover (mobile or tablet)
// * the new focus is inside the component
// * it is already closed
if ([breakpoints_1.DeviceBreakpointsType.MOBILE, breakpoints_1.DeviceBreakpointsType.TABLET].includes(device) ||
e.currentTarget.contains(e.relatedTarget) ||
!open) {
return;
}
setOpen(false);
onOpenClose?.(false, e);
};
const { setPopoverRef, setDragIconRef } = (0, useSwipeDown_1.useSwipeDown)(props.popover?.animationOptions, handleCloseInternally);
const setInnerRef = react_1.default.useCallback(node => {
actionBottomSheetRef.current = node;
const dragIcon = actionBottomSheetRef.current?.querySelector('[data-drag-icon]');
if (dragIcon instanceof HTMLElement) {
setDragIconRef(dragIcon);
}
}, []);
return ((0, jsx_runtime_1.jsx)(oliveMenuStandAlone_1.OliveMenuStandAlone, { ...props, ref: innerRef, actionBottomSheetStructure: {
...actionBottomSheetStructure,
forwardedRef: setInnerRef,
closeIcon: { ...actionBottomSheetStructure?.closeIcon, onClick: handleCloseIconClick },
}, device: device, open: open, popover: {
...props.popover,
forwardedRef: setPopoverRef,
onCloseInternally: handleCloseInternally,
}, styles: styles, trigger: trigger && { ...trigger, onClick: handleTriggerClick }, onBlur: handleBlur }));
});
OliveMenuComponent.displayName = 'OliveMenuComponent';
const OliveMenuBoundary = (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)(oliveMenuStandAlone_1.OliveMenuStandAlone, { ...props, ref: ref }) }), children: (0, jsx_runtime_1.jsx)(OliveMenuComponent, { ...props, ref: ref }) }));
const OliveMenu = react_1.default.forwardRef(OliveMenuBoundary);
exports.OliveMenu = OliveMenu;
//# sourceMappingURL=oliveMenu.js.map