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

Yamada UI autocomplete component

"use client"
import {
  useAutocomplete,
  useAutocompleteInput
} from "./chunk-NUGZZ2IV.mjs";
import {
  AutocompleteCreate
} from "./chunk-ELWBPJHC.mjs";
import {
  AutocompleteEmpty
} from "./chunk-UHODLDEV.mjs";
import {
  AutocompleteList
} from "./chunk-OWWPKTOS.mjs";
import {
  AutocompleteIcon
} from "./chunk-GCATFLFE.mjs";
import {
  AutocompleteDescendantsContextProvider,
  AutocompleteProvider,
  useAutocompleteContext
} from "./chunk-X5V76SN2.mjs";

// src/autocomplete.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { Popover, PopoverTrigger } from "@yamada-ui/popover";
import { Portal } from "@yamada-ui/portal";
import { cx, runIfFunc } from "@yamada-ui/utils";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var Autocomplete = forwardRef(
  (props, ref) => {
    const [styles, mergedProps] = useComponentMultiStyle("Autocomplete", props);
    const {
      className,
      color,
      defaultValue = "",
      footer,
      h,
      header,
      height = h,
      minH,
      minHeight = minH,
      containerProps,
      contentProps,
      createProps,
      emptyProps,
      fieldProps,
      iconProps,
      inputProps,
      listProps,
      portalProps = { disabled: true },
      ...computedProps
    } = omitThemeProps(mergedProps);
    const {
      allowCreate,
      children,
      descendants,
      empty,
      inputValue,
      value,
      formControlProps,
      getContainerProps,
      getFieldProps,
      getPopoverProps,
      onClose,
      ...rest
    } = useAutocomplete({ ...computedProps, defaultValue });
    const css = {
      color,
      h: "fit-content",
      w: "100%",
      ...styles.container
    };
    return /* @__PURE__ */ jsx(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
      AutocompleteProvider,
      {
        value: {
          ...rest,
          allowCreate,
          empty,
          inputValue,
          styles,
          value,
          formControlProps,
          onClose
        },
        children: /* @__PURE__ */ jsx(Popover, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs(
          ui.div,
          {
            className: cx("ui-autocomplete", className),
            __css: css,
            ...getContainerProps(containerProps),
            children: [
              /* @__PURE__ */ jsxs(
                ui.div,
                {
                  className: "ui-autocomplete__inner",
                  __css: { position: "relative", ...styles.inner },
                  children: [
                    /* @__PURE__ */ jsx(
                      AutocompleteField,
                      {
                        height,
                        minHeight,
                        inputProps,
                        ...getFieldProps(fieldProps, ref)
                      }
                    ),
                    /* @__PURE__ */ jsx(AutocompleteIcon, { ...iconProps, ...formControlProps })
                  ]
                }
              ),
              /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
                AutocompleteList,
                {
                  footer: runIfFunc(footer, { value, onClose }),
                  header: runIfFunc(header, { value, onClose }),
                  contentProps,
                  ...listProps,
                  children: !empty ? /* @__PURE__ */ jsxs(Fragment, { children: [
                    allowCreate ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps }),
                    children
                  ] }) : allowCreate && inputValue ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps })
                }
              ) })
            ]
          }
        ) })
      }
    ) });
  }
);
Autocomplete.displayName = "Autocomplete";
Autocomplete.__ui__ = "Autocomplete";
var AutocompleteField = forwardRef(
  ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
    const { inputValue, label, styles } = useAutocompleteContext();
    const { getInputProps } = useAutocompleteInput();
    const css = {
      alignItems: "center",
      display: "flex",
      h,
      minH,
      pe: "2rem",
      ...styles.field,
      cursor: "text"
    };
    return /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
      ui.div,
      {
        className: cx("ui-autocomplete__field", className),
        __css: css,
        ...rest,
        children: /* @__PURE__ */ jsx(
          ui.input,
          {
            className: "ui-autocomplete__field__input",
            display: "inline-block",
            placeholder,
            w: "100%",
            ...getInputProps(
              { ...inputProps, value: inputValue || label || "" },
              ref
            )
          }
        )
      }
    ) });
  }
);
AutocompleteField.displayName = "AutocompleteField";
AutocompleteField.__ui__ = "AutocompleteField";

export {
  Autocomplete
};
//# sourceMappingURL=chunk-I4VJ6HO5.mjs.map