@yamada-ui/autocomplete/dist/chunk-GCATFLFE.mjs

Yamada UI autocomplete component

"use client"
import {
  useAutocompleteContext
} from "./chunk-X5V76SN2.mjs";

// src/autocomplete-icon.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { ChevronIcon, CloseIcon } from "@yamada-ui/icon";
import { useClickable } from "@yamada-ui/use-clickable";
import { cx, getValidChildren, isValidElement } from "@yamada-ui/utils";
import { cloneElement, useRef } from "react";
import { jsx } from "react/jsx-runtime";
var AutocompleteIcon = forwardRef(
  ({ className, children, __css, ...rest }, ref) => {
    const { styles } = useAutocompleteContext();
    const css = {
      alignItems: "center",
      cursor: "pointer",
      display: "inline-flex",
      justifyContent: "center",
      pointerEvents: "none",
      position: "absolute",
      top: "50%",
      transform: "translateY(-50%)",
      ...styles.icon,
      ...__css
    };
    const validChildren = getValidChildren(children);
    const cloneChildren = validChildren.map(
      (child) => cloneElement(child, {
        style: {
          color: "currentColor",
          maxHeight: "1em",
          maxWidth: "1em"
        },
        "aria-hidden": true,
        focusable: false
      })
    );
    return /* @__PURE__ */ jsx(
      ui.div,
      {
        ref,
        className: cx("ui-autocomplete__icon", className),
        __css: css,
        ...rest,
        children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {})
      }
    );
  }
);
AutocompleteIcon.displayName = "AutocompleteIcon";
AutocompleteIcon.__ui__ = "AutocompleteIcon";
var AutocompleteClearIcon = ({
  className,
  children,
  ...props
}) => {
  const ref = useRef(null);
  const { styles } = useAutocompleteContext();
  const rest = useClickable({
    ref,
    ...props
  });
  return /* @__PURE__ */ jsx(
    AutocompleteIcon,
    {
      className: cx("ui-autocomplete__icon--clear", className),
      "aria-label": "Clear value",
      __css: styles.clearIcon,
      ...rest,
      children: children != null ? children : /* @__PURE__ */ jsx(CloseIcon, { h: "0.5em", w: "0.5em" })
    }
  );
};
AutocompleteClearIcon.displayName = "AutocompleteClearIcon";
AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
var AutocompleteItemIcon = forwardRef(({ className, ...rest }, ref) => {
  const { styles } = useAutocompleteContext();
  const css = {
    alignItems: "center",
    display: "inline-flex",
    flexShrink: 0,
    fontSize: "0.85em",
    justifyContent: "center",
    ...styles.itemIcon
  };
  return /* @__PURE__ */ jsx(
    ui.span,
    {
      ref,
      className: cx("ui-autocomplete__item__icon", className),
      __css: css,
      ...rest
    }
  );
});
AutocompleteItemIcon.displayName = "AutocompleteItemIcon";
AutocompleteItemIcon.__ui__ = "AutocompleteItemIcon";

export {
  AutocompleteIcon,
  AutocompleteClearIcon,
  AutocompleteItemIcon
};
//# sourceMappingURL=chunk-GCATFLFE.mjs.map