@hitachivantara/uikit-react-core/dist/esm/FormElement/Suggestions/Suggestions.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { forwardRef, useContext, useRef, useState, useEffect } from "react";
import { ClickAwayListener } from "@mui/base/ClickAwayListener";
import { Popper } from "@mui/base/Popper";
import { useForkRef } from "@mui/material/utils";
import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { getContainerElement } from "../../utils/document.js";
import { setId } from "../../utils/setId.js";
import { HvFormElementContext } from "../context.js";
import { useClasses } from "./Suggestions.styles.js";
import { staticClasses } from "./Suggestions.styles.js";
import { HvSelectionList } from "../../SelectionList/SelectionList.js";
import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
  const {
    id: idProp,
    className,
    classes: classesProp,
    expanded = false,
    enablePortal,
    open: openProp,
    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");
  const ref = useRef(null);
  const forkedRef = useForkRef(ref, extRef);
  const [isOpen, setIsOpen] = useState(expanded);
  useEffect(() => {
    setIsOpen(expanded);
  }, [expanded]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      id,
      ref: forkedRef,
      className: cx(classes.root, className),
      ...others,
      children: /* @__PURE__ */ jsx(
        ClickAwayListener,
        {
          onClickAway: (event) => {
            setIsOpen(false);
            onClose?.(event);
          },
          children: /* @__PURE__ */ jsx(
            Popper,
            {
              style: {
                // @ts-ignore
                "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
              },
              open: openProp ?? isOpen,
              disablePortal: !enablePortal,
              container: enablePortal ? getContainerElement(rootId) : void 0,
              anchorEl,
              className: cx(classes.popper, {
                [classes.portal]: enablePortal
              }),
              ...popperProps,
              children: /* @__PURE__ */ jsx(
                HvSelectionList,
                {
                  className: classes.list,
                  id: setId(id, "list"),
                  onChange: onSuggestionSelected,
                  children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
                }
              )
            }
          )
        }
      )
    }
  );
});
export {
  HvSuggestions,
  staticClasses as suggestionsClasses
};