@ozen-ui/kit
Version:
React component library
35 lines (34 loc) • 2.75 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useEffect } from 'react';
import { useCreateResizeObserver } from '../../../../hooks/useCreateResizeObserver';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useStoredValue } from '../../../../hooks/useStoredValue';
import { cn } from '../../../../utils/classname';
import { getPaperSizeToFormElement } from '../../../../utils/getPaperSizeToFormElement';
import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
import { Paper } from '../../../Paper';
import { Popover } from '../../../Popover';
import { useAutocompleteBaseContext } from '../../AutocompleteBaseContext';
var cnAutocompleteBaseDropdown = cn('AutocompleteBaseDropdown');
export var AutocompleteBaseDropdown = 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 : _e, className = _a.className, onExited = _a.onExited, popoverProps = __rest(_a, ["children", "strategy", "offset", "placement", "as", "className", "onExited"]);
var _f = useAutocompleteBaseContext(), size = _f.size, dropdownControl = _f.dropdownControl, searchControl = _f.searchControl, anchorRef = _f.anchorRef, inputRef = _f.inputRef;
var radius = getPaperSizeToFormElement(size);
var updateStored = useStoredValue(null);
var resizeObserver = useCreateResizeObserver(function () {
var _a;
(_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
});
useEffect(function () {
var input = inputRef.current;
if (input) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(inputRef.current);
}
}, [inputRef]);
return (React.createElement(Popover, __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: useMultiRef([ref, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.ref]) }), children));
});