@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
51 lines (50 loc) • 2.25 kB
JavaScript
import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
import { setId } from "../../utils/setId.js";
import { HvFormElementContext } from "../context.js";
import { getContainerElement } from "../../utils/document.js";
import { HvDropdownPanel } from "../../BaseDropdown/BaseDropdownPanel.js";
import { HvSelectionList } from "../../SelectionList/SelectionList.js";
import { useClasses } from "./Suggestions.styles.js";
import { mergeStyles, useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useContext, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useForkRef } from "@mui/material/utils";
//#region src/FormElement/Suggestions/Suggestions.tsx
var HvSuggestions = forwardRef(function HvSuggestions(props, extRef) {
const { id: idProp, className, classes: classesProp, enablePortal, open: openProp = false, anchorEl, suggestionValues, onClose, onSuggestionSelected, popperProps, ...others } = useDefaultProps("HvSuggestions", props);
const { classes, cx } = useClasses(classesProp);
const { rootId } = useTheme();
const context = useContext(HvFormElementContext);
const id = idProp ?? setId(context.id, "suggestions");
return /* @__PURE__ */ jsx("div", {
id,
ref: useForkRef(useRef(null), extRef),
className: cx(classes.root, className),
...others,
children: /* @__PURE__ */ jsx(HvDropdownPanel, {
onClickAway: onClose,
style: mergeStyles(void 0, { "--popper-width": enablePortal && `${anchorEl?.clientWidth}px` }),
open: openProp,
disablePortal: !enablePortal,
container: enablePortal ? getContainerElement(rootId) : void 0,
anchorEl,
className: cx(classes.popper, { [classes.portal]: enablePortal }),
classes: { panel: classes.panel },
...popperProps,
children: /* @__PURE__ */ jsx(HvSelectionList, {
className: classes.list,
id: setId(id, "list"),
onChange: onSuggestionSelected,
onMouseDown: (evt) => evt.preventDefault(),
onPointerDown: (evt) => evt.preventDefault(),
children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, {
value: item,
disabled: item.disabled,
children: item.label
}, item.id))
})
})
});
});
//#endregion
export { HvSuggestions };