@kubit-ui-web/react-components/dist/cjs/components/dropdownSelected/dropdownSelectedControlled.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.DropdownSelectedControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const stylesName_1 = require("../../constants/stylesName/stylesName");
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const keyboard_utility_1 = require("../../utils/keyboard/keyboard.utility");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const genericComponentsProvider_1 = require("../../provider/genericComponents/genericComponentsProvider");
const role_1 = require("../../types/role/role");
const focusHandlers_1 = require("../../utils/focusHandlers/focusHandlers");
const type_1 = require("../listOptions/types/type");
const dropdownSelectedStandAlone_1 = require("./dropdownSelectedStandAlone");
const state_1 = require("./utils/state");
// eslint-disable-next-line react/display-name
const DropdownSelectedControlledComponent = react_1.default.forwardRef(({ variant, onMouseEnter, onMouseLeave, ...props }, ref) => {
    const [hover, setHover] = react_1.default.useState(false);
    const stateStyles = (0, useStyles_1.useStyles)(stylesName_1.STYLES_NAME.DROPDOWN_SELECTED, variant, props.ctv);
    const styles = stateStyles[(0, state_1.getState)({ hover })];
    const listOptionsRef = react_1.default.useRef(null);
    const handleOnKeyDownButton = event => {
        if (props.open && (0, keyboard_utility_1.isKeyTabPressed)(event.key) && !event.shiftKey && listOptionsRef?.current) {
            if (props.listOptions.type === type_1.ListOptionsType.SELECTION) {
                listOptionsRef?.current?.firstElementChild?.focus();
            }
            else {
                (0, focusHandlers_1.focusFirstDescendant)(listOptionsRef?.current);
            }
            event.preventDefault();
        }
    };
    react_1.default.useEffect(() => {
        if (props.closePopoverOnScroll) {
            window.addEventListener('scroll', props.onClosePopover);
            return () => {
                window.removeEventListener('scroll', props.onClosePopover);
            };
        }
        return undefined;
    }, []);
    const handleMouseEnter = (event) => {
        setHover(true);
        onMouseEnter?.(event);
    };
    const handleMouseLeave = (event) => {
        setHover(false);
        onMouseLeave?.(event);
    };
    const { LINK } = (0, genericComponentsProvider_1.useGenericComponents)();
    return ((0, jsx_runtime_1.jsx)(dropdownSelectedStandAlone_1.DropdownSelectedStandAlone, { ref: ref, component: !props.url ? role_1.ROLES.BUTTON : LINK, listOptionsRef: listOptionsRef, styles: styles, onButtonKeyDown: handleOnKeyDownButton, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props }));
});
const DropdownSelectedBoundary = (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)(dropdownSelectedStandAlone_1.DropdownSelectedStandAlone, { ...props, ref: ref }) }), children: (0, jsx_runtime_1.jsx)(DropdownSelectedControlledComponent, { ...props, ref: ref }) }));
const DropdownSelectedControlled = react_1.default.forwardRef(DropdownSelectedBoundary);
exports.DropdownSelectedControlled = DropdownSelectedControlled;
//# sourceMappingURL=dropdownSelectedControlled.js.map