@ozen-ui/kit
Version:
React component library
38 lines (37 loc) • 3.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AutocompleteBaseDropdown = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var useCreateResizeObserver_1 = require("../../../../hooks/useCreateResizeObserver");
var useMultiRef_1 = require("../../../../hooks/useMultiRef");
var useStoredValue_1 = require("../../../../hooks/useStoredValue");
var classname_1 = require("../../../../utils/classname");
var getPaperSizeToFormElement_1 = require("../../../../utils/getPaperSizeToFormElement");
var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
var Paper_1 = require("../../../Paper");
var Popover_1 = require("../../../Popover");
var AutocompleteBaseContext_1 = require("../../AutocompleteBaseContext");
var cnAutocompleteBaseDropdown = (0, classname_1.cn)('AutocompleteBaseDropdown');
exports.AutocompleteBaseDropdown = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
var children = _a.children, _b = _a.strategy, strategy = _b === void 0 ? 'absolute' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 4] : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = _a.as, as = _e === void 0 ? Paper_1.Paper : _e, className = _a.className, onExited = _a.onExited, popoverProps = tslib_1.__rest(_a, ["children", "strategy", "offset", "placement", "as", "className", "onExited"]);
var _f = (0, AutocompleteBaseContext_1.useAutocompleteBaseContext)(), size = _f.size, dropdownControl = _f.dropdownControl, searchControl = _f.searchControl, anchorRef = _f.anchorRef, inputRef = _f.inputRef;
var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
var updateStored = (0, useStoredValue_1.useStoredValue)(null);
var resizeObserver = (0, useCreateResizeObserver_1.useCreateResizeObserver)(function () {
var _a;
(_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
});
(0, react_1.useEffect)(function () {
var input = inputRef.current;
if (input) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(inputRef.current);
}
}, [inputRef]);
return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ offset: offset, strategy: strategy, placement: placement, setUpdate: function (update) {
updateStored.current = update;
}, as: as, transitionProps: { classNames: 'AutocompleteBaseDropdown-animation' }, className: cnAutocompleteBaseDropdown('', [className]), equalAnchorWidth: true, disableReturnFocus: true, disableEnforceFocus: true, onExited: function () {
onExited === null || onExited === void 0 ? void 0 : onExited();
searchControl.deactivate();
} }, popoverProps, { open: dropdownControl.isOpen, radius: radius, onClose: dropdownControl.close, anchorRef: anchorRef, ref: (0, useMultiRef_1.useMultiRef)([ref, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.ref]) }), children));
});