@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
81 lines • 3.61 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownSelected = exports.DropdownSelectedUnControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const keyboardKeys_1 = require("../../constants/keyboardKeys/keyboardKeys");
const dropdownSelectedControlled_1 = require("./dropdownSelectedControlled");
const DropdownSelectedUnControlledComponent = ({ defaultOpen = false, defaultOptionSelected, openAndCloseOnHover = false, onClosePopover, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }, ref) => {
const [open, setOpen] = react_1.default.useState(defaultOpen);
const [optionSelected, setOptionSelected] = react_1.default.useState(defaultOptionSelected);
const buttonOrLinkRef = react_1.default.useRef(null);
// Close dropdown when the document hides
react_1.default.useEffect(() => {
const handleVisibilityChange = e => {
if (document.hidden) {
setOpen(false);
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
}, []);
const handleOnClickButton = () => {
props.onButtonClick?.(!open);
setOpen(!open);
};
const handleOnClosePopover = () => {
const openValue = false;
setOpen(openValue);
onClosePopover?.(openValue);
};
const handleOnClickOption = (value) => {
setOptionSelected(value);
props.onOptionClick?.(value);
};
const handleOnMouseEnter = () => {
if (openAndCloseOnHover) {
const openValue = true;
setOpen(openValue);
onMouseEnter?.(openValue);
}
};
const handleOnMouseLeave = () => {
if (openAndCloseOnHover) {
const openValue = false;
setOpen(openValue);
onMouseLeave?.(openValue);
}
};
const handleOnKeyDown = event => {
if (keyboardKeys_1.ESCAPE.key.includes(event.key) && open) {
buttonOrLinkRef.current?.focus();
setOpen(false);
}
};
const handleOnFocus = () => {
if (openAndCloseOnHover) {
const openValue = true;
setOpen(openValue);
onFocus?.(openValue);
}
};
const handleOnBlur = event => {
const openValue = false;
if (!event.currentTarget.contains(event.relatedTarget)) {
setOpen(openValue);
onBlur?.(openValue);
}
if (openAndCloseOnHover) {
setOpen(openValue);
onBlur?.(openValue);
}
};
return ((0, jsx_runtime_1.jsx)(dropdownSelectedControlled_1.DropdownSelectedControlled, { ...props, ref: ref, buttonOrLinkRef: buttonOrLinkRef, open: open, optionSelected: optionSelected, onBlur: handleOnBlur, onButtonClick: handleOnClickButton, onClosePopover: handleOnClosePopover, onFocus: handleOnFocus, onKeyDown: handleOnKeyDown, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, onOptionClick: handleOnClickOption }));
};
const DropdownSelectedUnControlled = react_1.default.forwardRef(DropdownSelectedUnControlledComponent);
exports.DropdownSelectedUnControlled = DropdownSelectedUnControlled;
exports.DropdownSelected = DropdownSelectedUnControlled;
//# sourceMappingURL=dropdownSelectedUncontrolled.js.map