@yamada-ui/autocomplete 1.5.1 → 1.5.2-dev-20240917033401

package/dist/chunk-7GCVSXCV.mjs

@@ -0,0 +1,190 @@
+"use client"
+import {
+  useAutocomplete,
+  useAutocompleteInput
+} from "./chunk-GM7RV2YY.mjs";
+import {
+  AutocompleteCreate
+} from "./chunk-KCALQJLK.mjs";
+import {
+  AutocompleteEmpty
+} from "./chunk-GOMUH7TZ.mjs";
+import {
+  AutocompleteList
+} from "./chunk-HL2KEBRX.mjs";
+import {
+  AutocompleteIcon
+} from "./chunk-JXFXCGZK.mjs";
+import {
+  AutocompleteDescendantsContextProvider,
+  AutocompleteProvider,
+  useAutocompleteContext
+} from "./chunk-JPUKYLBW.mjs";
+
+// src/autocomplete.tsx
+import {
+  ui,
+  forwardRef,
+  useComponentMultiStyle,
+  omitThemeProps
+} 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 { jsx, jsxs } from "react/jsx-runtime";
+var Autocomplete = forwardRef(
+  (props, ref) => {
+    const [styles, mergedProps] = useComponentMultiStyle("Autocomplete", props);
+    let {
+      className,
+      defaultValue = "",
+      color,
+      h,
+      height,
+      minH,
+      minHeight,
+      containerProps,
+      contentProps,
+      listProps,
+      fieldProps,
+      inputProps,
+      iconProps,
+      portalProps = { isDisabled: true },
+      createProps,
+      emptyProps,
+      header,
+      footer,
+      children,
+      ...computedProps
+    } = omitThemeProps(mergedProps);
+    const {
+      value,
+      onClose,
+      descendants,
+      formControlProps,
+      getPopoverProps,
+      getContainerProps,
+      getFieldProps,
+      allowCreate,
+      isEmpty,
+      inputValue,
+      computedChildren,
+      ...rest
+    } = useAutocomplete({ ...computedProps, defaultValue, children });
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    const css = {
+      w: "100%",
+      h: "fit-content",
+      color,
+      ...styles.container
+    };
+    return /* @__PURE__ */ jsx(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
+      AutocompleteProvider,
+      {
+        value: {
+          ...rest,
+          value,
+          onClose,
+          formControlProps,
+          inputValue,
+          allowCreate,
+          isEmpty,
+          styles
+        },
+        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,
+                      {
+                        h,
+                        minH,
+                        inputProps,
+                        ...getFieldProps(fieldProps, ref)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(AutocompleteIcon, { ...iconProps, ...formControlProps })
+                  ]
+                }
+              ),
+              !isEmpty ? /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsxs(
+                AutocompleteList,
+                {
+                  header: runIfFunc(header, { value, onClose }),
+                  footer: runIfFunc(footer, { value, onClose }),
+                  contentProps,
+                  ...listProps,
+                  children: [
+                    allowCreate ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps }),
+                    children != null ? children : computedChildren
+                  ]
+                }
+              ) }) : /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+                AutocompleteList,
+                {
+                  header: runIfFunc(header, { value, onClose }),
+                  footer: runIfFunc(footer, { value, onClose }),
+                  contentProps,
+                  ...listProps,
+                  children: allowCreate && inputValue ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps })
+                }
+              ) })
+            ]
+          }
+        ) })
+      }
+    ) });
+  }
+);
+var AutocompleteField = forwardRef(
+  ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
+    const { label, inputValue, styles } = useAutocompleteContext();
+    const { getInputProps } = useAutocompleteInput();
+    const css = {
+      pe: "2rem",
+      h,
+      minH,
+      display: "flex",
+      alignItems: "center",
+      ...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",
+            w: "100%",
+            placeholder,
+            ...getInputProps(
+              { ...inputProps, value: inputValue || label || "" },
+              ref
+            )
+          }
+        )
+      }
+    ) });
+  }
+);
+
+export {
+  Autocomplete
+};
+//# sourceMappingURL=chunk-7GCVSXCV.mjs.map

package/dist/chunk-7GCVSXCV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useComponentMultiStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport type { FC, ReactNode } from \"react\"\nimport {\n  AutocompleteDescendantsContextProvider,\n  AutocompleteProvider,\n  useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport type { AutocompleteCreateProps } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport type { AutocompleteEmptyProps } from \"./autocomplete-empty\"\nimport type { AutocompleteIconProps } from \"./autocomplete-icon\"\nimport { AutocompleteIcon } from \"./autocomplete-icon\"\nimport type { AutocompleteListProps } from \"./autocomplete-list\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface AutocompleteOptions {\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * Props for autocomplete container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for autocomplete content element.\n   */\n  contentProps?: Omit<MotionProps, \"children\">\n  /**\n   * Props for autocomplete list element.\n   */\n  listProps?: Omit<AutocompleteListProps, \"children\">\n  /**\n   * Props for autocomplete field element.\n   */\n  fieldProps?: Omit<AutocompleteFieldProps, \"inputProps\" | \"children\">\n  /**\n   * Props for autocomplete input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for autocomplete icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ isDisabled: true }'\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for autocomplete create element.\n   */\n  createProps?: Omit<AutocompleteCreateProps, \"children\">\n  /**\n   * Props for autocomplete empty element.\n   */\n  emptyProps?: Omit<AutocompleteEmptyProps, \"children\">\n  /**\n   * The header of the autocomplete content element.\n   */\n  header?: ReactNode | FC<{ value: string | undefined; onClose: () => void }>\n  /**\n   * The footer of the autocomplete content element.\n   */\n  footer?: ReactNode | FC<{ value: string | undefined; onClose: () => void }>\n}\n\nexport interface AutocompleteProps\n  extends ThemeProps<\"Autocomplete\">,\n    Omit<UseAutocompleteProps, \"maxSelectValues\" | \"omitSelectedValues\">,\n    AutocompleteOptions {}\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see Docs https://yamada-ui.com/components/forms/autocomplete\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Autocomplete\", props)\n    let {\n      className,\n      defaultValue = \"\",\n      color,\n      h,\n      height,\n      minH,\n      minHeight,\n      containerProps,\n      contentProps,\n      listProps,\n      fieldProps,\n      inputProps,\n      iconProps,\n      portalProps = { isDisabled: true },\n      createProps,\n      emptyProps,\n      header,\n      footer,\n      children,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n\n    const {\n      value,\n      onClose,\n      descendants,\n      formControlProps,\n      getPopoverProps,\n      getContainerProps,\n      getFieldProps,\n      allowCreate,\n      isEmpty,\n      inputValue,\n      computedChildren,\n      ...rest\n    } = useAutocomplete({ ...computedProps, defaultValue, children })\n\n    h ??= height\n    minH ??= minHeight\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n      h: \"fit-content\",\n      color,\n      ...styles.container,\n    }\n\n    return (\n      <AutocompleteDescendantsContextProvider value={descendants}>\n        <AutocompleteProvider\n          value={{\n            ...rest,\n            value,\n            onClose,\n            formControlProps,\n            inputValue,\n            allowCreate,\n            isEmpty,\n            styles,\n          }}\n        >\n          <Popover {...getPopoverProps()}>\n            <ui.div\n              className={cx(\"ui-autocomplete\", className)}\n              __css={css}\n              {...getContainerProps(containerProps)}\n            >\n              <ui.div\n                className=\"ui-autocomplete__inner\"\n                __css={{ position: \"relative\", ...styles.inner }}\n              >\n                <AutocompleteField\n                  h={h}\n                  minH={minH}\n                  inputProps={inputProps}\n                  {...getFieldProps(fieldProps, ref)}\n                />\n\n                <AutocompleteIcon {...iconProps} {...formControlProps} />\n              </ui.div>\n\n              {!isEmpty ? (\n                <Portal {...portalProps}>\n                  <AutocompleteList\n                    header={runIfFunc(header, { value, onClose })}\n                    footer={runIfFunc(footer, { value, onClose })}\n                    contentProps={contentProps}\n                    {...listProps}\n                  >\n                    {allowCreate ? (\n                      <AutocompleteCreate {...createProps} />\n                    ) : (\n                      <AutocompleteEmpty {...emptyProps} />\n                    )}\n\n                    {children ?? computedChildren}\n                  </AutocompleteList>\n                </Portal>\n              ) : (\n                <Portal {...portalProps}>\n                  <AutocompleteList\n                    header={runIfFunc(header, { value, onClose })}\n                    footer={runIfFunc(footer, { value, onClose })}\n                    contentProps={contentProps}\n                    {...listProps}\n                  >\n                    {allowCreate && inputValue ? (\n                      <AutocompleteCreate {...createProps} />\n                    ) : (\n                      <AutocompleteEmpty {...emptyProps} />\n                    )}\n                  </AutocompleteList>\n                </Portal>\n              )}\n            </ui.div>\n          </Popover>\n        </AutocompleteProvider>\n      </AutocompleteDescendantsContextProvider>\n    )\n  },\n)\n\ninterface AutocompleteFieldProps\n  extends HTMLUIProps,\n    Pick<AutocompleteProps, \"inputProps\"> {}\n\nconst AutocompleteField = forwardRef<AutocompleteFieldProps, \"input\">(\n  ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {\n    const { label, inputValue, styles } = useAutocompleteContext()\n    const { getInputProps } = useAutocompleteInput()\n\n    const css: CSSUIObject = {\n      pe: \"2rem\",\n      h,\n      minH,\n      display: \"flex\",\n      alignItems: \"center\",\n      ...styles.field,\n      cursor: \"text\",\n    }\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-autocomplete__field\", className)}\n          __css={css}\n          {...rest}\n        >\n          <ui.input\n            className=\"ui-autocomplete__field__input\"\n            display=\"inline-block\"\n            w=\"100%\"\n            placeholder={placeholder}\n            {...getInputProps(\n              { ...inputProps, value: inputValue || label || \"\" },\n              ref,\n            )}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n"],"mappings":"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","names":[]}

package/dist/chunk-BD7VZQOL.mjs

@@ -0,0 +1,267 @@
+"use client"
+import {
+  useAutocomplete,
+  useAutocompleteInput
+} from "./chunk-GM7RV2YY.mjs";
+import {
+  AutocompleteCreate
+} from "./chunk-KCALQJLK.mjs";
+import {
+  AutocompleteEmpty
+} from "./chunk-GOMUH7TZ.mjs";
+import {
+  AutocompleteList
+} from "./chunk-HL2KEBRX.mjs";
+import {
+  AutocompleteClearIcon,
+  AutocompleteIcon
+} from "./chunk-JXFXCGZK.mjs";
+import {
+  AutocompleteDescendantsContextProvider,
+  AutocompleteProvider,
+  useAutocompleteContext
+} from "./chunk-JPUKYLBW.mjs";
+
+// src/multi-autocomplete.tsx
+import {
+  ui,
+  forwardRef,
+  useComponentMultiStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { Popover, PopoverTrigger } from "@yamada-ui/popover";
+import { Portal } from "@yamada-ui/portal";
+import { cx, handlerAll, runIfFunc } from "@yamada-ui/utils";
+import { cloneElement, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MultiAutocomplete = forwardRef(
+  (props, ref) => {
+    const [styles, mergedProps] = useComponentMultiStyle(
+      "MultiAutocomplete",
+      props
+    );
+    let {
+      className,
+      defaultValue = [],
+      component,
+      separator,
+      isClearable = true,
+      color,
+      h,
+      height,
+      minH,
+      minHeight,
+      closeOnSelect = false,
+      keepPlaceholder = false,
+      containerProps,
+      contentProps,
+      listProps,
+      fieldProps,
+      inputProps,
+      iconProps,
+      clearIconProps,
+      portalProps = { isDisabled: true },
+      createProps,
+      emptyProps,
+      header,
+      footer,
+      children,
+      ...computedProps
+    } = omitThemeProps(mergedProps);
+    const {
+      value,
+      onClose,
+      descendants,
+      formControlProps,
+      getPopoverProps,
+      getContainerProps,
+      getFieldProps,
+      allowCreate,
+      isEmpty,
+      inputValue,
+      computedChildren,
+      onClear,
+      ...rest
+    } = useAutocomplete({
+      ...computedProps,
+      defaultValue,
+      closeOnSelect,
+      children
+    });
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    const css = {
+      w: "100%",
+      h: "fit-content",
+      color,
+      ...styles.container
+    };
+    return /* @__PURE__ */ jsx(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
+      AutocompleteProvider,
+      {
+        value: {
+          ...rest,
+          value,
+          onClose,
+          formControlProps,
+          inputValue,
+          allowCreate,
+          isEmpty,
+          styles
+        },
+        children: /* @__PURE__ */ jsx(Popover, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs(
+          ui.div,
+          {
+            className: cx("ui-multi-autocomplete", className),
+            __css: css,
+            ...getContainerProps(containerProps),
+            children: [
+              /* @__PURE__ */ jsxs(
+                ui.div,
+                {
+                  className: "ui-multi-autocomplete__inner",
+                  __css: { position: "relative", ...styles.inner },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      MultiAutocompleteField,
+                      {
+                        component,
+                        separator,
+                        keepPlaceholder,
+                        h,
+                        minH,
+                        inputProps,
+                        ...getFieldProps(fieldProps, ref)
+                      }
+                    ),
+                    isClearable && value.length ? /* @__PURE__ */ jsx(
+                      AutocompleteClearIcon,
+                      {
+                        ...clearIconProps,
+                        onClick: handlerAll(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
+                        ...formControlProps
+                      }
+                    ) : /* @__PURE__ */ jsx(AutocompleteIcon, { ...iconProps, ...formControlProps })
+                  ]
+                }
+              ),
+              !isEmpty ? /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsxs(
+                AutocompleteList,
+                {
+                  header: runIfFunc(header, { value, onClose }),
+                  footer: runIfFunc(footer, { value, onClose }),
+                  contentProps,
+                  ...listProps,
+                  children: [
+                    allowCreate ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps }),
+                    children != null ? children : computedChildren
+                  ]
+                }
+              ) }) : /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+                AutocompleteList,
+                {
+                  header: runIfFunc(header, { value, onClose }),
+                  footer: runIfFunc(footer, { value, onClose }),
+                  contentProps,
+                  ...listProps,
+                  children: allowCreate && inputValue ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps })
+                }
+              ) })
+            ]
+          }
+        ) })
+      }
+    ) });
+  }
+);
+var MultiAutocompleteField = forwardRef(
+  ({
+    className,
+    component,
+    separator = ",",
+    keepPlaceholder,
+    h,
+    minH,
+    placeholder,
+    inputProps,
+    ...rest
+  }, ref) => {
+    const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
+    const { getInputProps } = useAutocompleteInput();
+    const cloneChildren = useMemo(() => {
+      if (!(label == null ? void 0 : label.length)) return null;
+      if (component) {
+        return label.map((label2, index) => {
+          const onRemove = (ev) => {
+            ev.stopPropagation();
+            onChange(value[index]);
+            if (inputRef.current) inputRef.current.focus();
+          };
+          const el = component({
+            value: value[index],
+            label: label2,
+            index,
+            onRemove
+          });
+          const style = {
+            marginBlockStart: "0.125rem",
+            marginBlockEnd: "0.125rem",
+            marginInlineEnd: "0.25rem"
+          };
+          return el ? cloneElement(el, { key: index, style }) : null;
+        });
+      } else {
+        return label.map((value2, index) => {
+          const isLast = label.length === index + 1;
+          return /* @__PURE__ */ jsxs(ui.span, { display: "inline-block", me: "0.25rem", children: [
+            value2,
+            !isLast || isOpen ? separator : null
+          ] }, index);
+        });
+      }
+    }, [label, component, value, onChange, isOpen, inputRef, separator]);
+    const css = {
+      pe: "2rem",
+      h,
+      minH,
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      ...styles.field,
+      cursor: "text"
+    };
+    return /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs(
+      ui.div,
+      {
+        className: cx("ui-multi-autocomplete__field", className),
+        __css: css,
+        py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
+        ...rest,
+        children: [
+          cloneChildren,
+          /* @__PURE__ */ jsx(
+            ui.input,
+            {
+              "aria-label": "Input value",
+              className: "ui-multi-autocomplete__field__input",
+              display: "inline-block",
+              flex: "1",
+              minW: "0px",
+              overflow: "hidden",
+              marginBlockStart: "0.125rem",
+              marginBlockEnd: "0.125rem",
+              "aria-multiselectable": "true",
+              placeholder: !label || !(label == null ? void 0 : label.length) || keepPlaceholder && isOpen ? placeholder : void 0,
+              ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+
+export {
+  MultiAutocomplete
+};
+//# sourceMappingURL=chunk-BD7VZQOL.mjs.map

package/dist/chunk-BD7VZQOL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/multi-autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useComponentMultiStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { cx, handlerAll, runIfFunc } from \"@yamada-ui/utils\"\nimport type {\n  CSSProperties,\n  FC,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n} from \"react\"\nimport { cloneElement, useMemo } from \"react\"\nimport {\n  AutocompleteDescendantsContextProvider,\n  AutocompleteProvider,\n  useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport type { AutocompleteCreateProps } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport type { AutocompleteEmptyProps } from \"./autocomplete-empty\"\nimport type { AutocompleteIconProps } from \"./autocomplete-icon\"\nimport { AutocompleteClearIcon, AutocompleteIcon } from \"./autocomplete-icon\"\nimport type { AutocompleteListProps } from \"./autocomplete-list\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface MultiAutocompleteOptions {\n  /**\n   * The visual separator between each value.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * The custom display value to use.\n   */\n  component?: FC<{\n    value: string | number\n    label: string\n    index: number\n    onRemove: MouseEventHandler<HTMLElement>\n  }>\n  /**\n   * If `true`, keep the placeholder.\n   *\n   * @default false\n   */\n  keepPlaceholder?: boolean\n  /**\n   * If `true`, display the select clear icon.\n   *\n   * @default true\n   */\n  isClearable?: boolean\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * Props for multi autocomplete container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for multi autocomplete content element.\n   */\n  contentProps?: Omit<MotionProps, \"children\">\n  /**\n   * Props for multi autocomplete list element.\n   */\n  listProps?: Omit<AutocompleteListProps, \"children\">\n  /**\n   * Props for multi autocomplete field element.\n   */\n  fieldProps?: Omit<\n    MultiAutocompleteFieldProps,\n    \"component\" | \"separator\" | \"keepPlaceholder\" | \"inputProps\" | \"children\"\n  >\n  /**\n   * Props for multi autocomplete input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for multi autocomplete icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * Props for multi autocomplete clear icon element.\n   */\n  clearIconProps?: AutocompleteIconProps\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ isDisabled: true }'\n   *\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * If `true`, the list element will be closed when value is selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n  /**\n   * Props for autocomplete create element.\n   */\n  createProps?: Omit<AutocompleteCreateProps, \"children\">\n  /**\n   * Props for autocomplete empty element.\n   */\n  emptyProps?: Omit<AutocompleteEmptyProps, \"children\">\n  /**\n   * The header of the autocomplete content element.\n   */\n  header?: ReactNode | FC<{ value: string[] | undefined; onClose: () => void }>\n  /**\n   * The footer of the autocomplete content element.\n   */\n  footer?: ReactNode | FC<{ value: string[] | undefined; onClose: () => void }>\n}\n\nexport interface MultiAutocompleteProps\n  extends ThemeProps<\"MultiAutocomplete\">,\n    Omit<UseAutocompleteProps<string[]>, \"closeOnSelect\">,\n    MultiAutocompleteOptions {}\n\n/**\n * `MultiAutocomplete` is a component used to display suggestions based on user text input and to obtain multiple values.\n *\n * @see Docs https://yamada-ui.com/components/forms/multi-autocomplete\n */\nexport const MultiAutocomplete = forwardRef<MultiAutocompleteProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"MultiAutocomplete\",\n      props,\n    )\n    let {\n      className,\n      defaultValue = [],\n      component,\n      separator,\n      isClearable = true,\n      color,\n      h,\n      height,\n      minH,\n      minHeight,\n      closeOnSelect = false,\n      keepPlaceholder = false,\n      containerProps,\n      contentProps,\n      listProps,\n      fieldProps,\n      inputProps,\n      iconProps,\n      clearIconProps,\n      portalProps = { isDisabled: true },\n      createProps,\n      emptyProps,\n      header,\n      footer,\n      children,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n\n    const {\n      value,\n      onClose,\n      descendants,\n      formControlProps,\n      getPopoverProps,\n      getContainerProps,\n      getFieldProps,\n      allowCreate,\n      isEmpty,\n      inputValue,\n      computedChildren,\n      onClear,\n      ...rest\n    } = useAutocomplete<string[]>({\n      ...computedProps,\n      defaultValue,\n      closeOnSelect,\n      children,\n    })\n\n    h ??= height\n    minH ??= minHeight\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n      h: \"fit-content\",\n      color,\n      ...styles.container,\n    }\n\n    return (\n      <AutocompleteDescendantsContextProvider value={descendants}>\n        <AutocompleteProvider\n          value={{\n            ...rest,\n            value,\n            onClose,\n            formControlProps,\n            inputValue,\n            allowCreate,\n            isEmpty,\n            styles,\n          }}\n        >\n          <Popover {...getPopoverProps()}>\n            <ui.div\n              className={cx(\"ui-multi-autocomplete\", className)}\n              __css={css}\n              {...getContainerProps(containerProps)}\n            >\n              <ui.div\n                className=\"ui-multi-autocomplete__inner\"\n                __css={{ position: \"relative\", ...styles.inner }}\n              >\n                <MultiAutocompleteField\n                  component={component}\n                  separator={separator}\n                  keepPlaceholder={keepPlaceholder}\n                  h={h}\n                  minH={minH}\n                  inputProps={inputProps}\n                  {...getFieldProps(fieldProps, ref)}\n                />\n\n                {isClearable && value.length ? (\n                  <AutocompleteClearIcon\n                    {...clearIconProps}\n                    onClick={handlerAll(clearIconProps?.onClick, onClear)}\n                    {...formControlProps}\n                  />\n                ) : (\n                  <AutocompleteIcon {...iconProps} {...formControlProps} />\n                )}\n              </ui.div>\n\n              {!isEmpty ? (\n                <Portal {...portalProps}>\n                  <AutocompleteList\n                    header={runIfFunc(header, { value, onClose })}\n                    footer={runIfFunc(footer, { value, onClose })}\n                    contentProps={contentProps}\n                    {...listProps}\n                  >\n                    {allowCreate ? (\n                      <AutocompleteCreate {...createProps} />\n                    ) : (\n                      <AutocompleteEmpty {...emptyProps} />\n                    )}\n\n                    {children ?? computedChildren}\n                  </AutocompleteList>\n                </Portal>\n              ) : (\n                <Portal {...portalProps}>\n                  <AutocompleteList\n                    header={runIfFunc(header, { value, onClose })}\n                    footer={runIfFunc(footer, { value, onClose })}\n                    contentProps={contentProps}\n                    {...listProps}\n                  >\n                    {allowCreate && inputValue ? (\n                      <AutocompleteCreate {...createProps} />\n                    ) : (\n                      <AutocompleteEmpty {...emptyProps} />\n                    )}\n                  </AutocompleteList>\n                </Portal>\n              )}\n            </ui.div>\n          </Popover>\n        </AutocompleteProvider>\n      </AutocompleteDescendantsContextProvider>\n    )\n  },\n)\n\ninterface MultiAutocompleteFieldProps\n  extends HTMLUIProps,\n    Pick<\n      MultiAutocompleteProps,\n      \"component\" | \"separator\" | \"keepPlaceholder\" | \"inputProps\"\n    > {}\n\nconst MultiAutocompleteField = forwardRef<MultiAutocompleteFieldProps, \"input\">(\n  (\n    {\n      className,\n      component,\n      separator = \",\",\n      keepPlaceholder,\n      h,\n      minH,\n      placeholder,\n      inputProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { value, label, inputValue, onChange, isOpen, inputRef, styles } =\n      useAutocompleteContext()\n\n    const { getInputProps } = useAutocompleteInput()\n\n    const cloneChildren = useMemo(() => {\n      if (!label?.length) return null\n\n      if (component) {\n        return (label as string[]).map((label, index) => {\n          const onRemove: MouseEventHandler<HTMLElement> = (ev) => {\n            ev.stopPropagation()\n\n            onChange(value[index])\n\n            if (inputRef.current) inputRef.current.focus()\n          }\n\n          const el = component({\n            value: value[index],\n            label,\n            index,\n            onRemove,\n          })\n\n          const style: CSSProperties = {\n            marginBlockStart: \"0.125rem\",\n            marginBlockEnd: \"0.125rem\",\n            marginInlineEnd: \"0.25rem\",\n          }\n\n          return el\n            ? cloneElement(el as ReactElement, { key: index, style })\n            : null\n        })\n      } else {\n        return (label as string[]).map((value, index) => {\n          const isLast = label.length === index + 1\n\n          return (\n            <ui.span key={index} display=\"inline-block\" me=\"0.25rem\">\n              {value}\n              {!isLast || isOpen ? separator : null}\n            </ui.span>\n          )\n        })\n      }\n    }, [label, component, value, onChange, isOpen, inputRef, separator])\n\n    const css: CSSUIObject = {\n      pe: \"2rem\",\n      h,\n      minH,\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      alignItems: \"center\",\n      ...styles.field,\n      cursor: \"text\",\n    }\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-multi-autocomplete__field\", className)}\n          __css={css}\n          py={label?.length && component ? \"0.125rem\" : undefined}\n          {...rest}\n        >\n          {cloneChildren}\n\n          <ui.input\n            aria-label=\"Input value\"\n            className=\"ui-multi-autocomplete__field__input\"\n            display=\"inline-block\"\n            flex=\"1\"\n            minW=\"0px\"\n            overflow=\"hidden\"\n            marginBlockStart=\"0.125rem\"\n            marginBlockEnd=\"0.125rem\"\n            aria-multiselectable=\"true\"\n            placeholder={\n              !label || !label?.length || (keepPlaceholder && isOpen)\n                ? placeholder\n                : undefined\n            }\n            {...getInputProps({ ...inputProps, value: inputValue ?? \"\" }, ref)}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n"],"mappings":"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","names":["label","value"]}

package/dist/chunk-FZM3BH3D.mjs

@@ -0,0 +1,57 @@
+"use client"
+import {
+  useAutocompleteOptionGroup
+} from "./chunk-JMX72TSD.mjs";
+import {
+  useAutocompleteContext
+} from "./chunk-JPUKYLBW.mjs";
+
+// src/autocomplete-option-group.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AutocompleteOptionGroup = forwardRef(
+  ({ className, color, h, height, minH, minHeight, children, ...rest }, ref) => {
+    const { styles } = useAutocompleteContext();
+    const { label, getContainerProps, getGroupProps } = useAutocompleteOptionGroup(rest);
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    return /* @__PURE__ */ jsxs(
+      ui.li,
+      {
+        className: cx(
+          "ui-autocomplete__item",
+          "ui-autocomplete__item--group",
+          className
+        ),
+        __css: { w: "100%", h: "fit-content", color },
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ jsx(
+            ui.span,
+            {
+              className: "ui-autocomplete__item__group-label",
+              __css: styles.groupLabel,
+              lineClamp: 1,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ui.ul,
+            {
+              ...getGroupProps({}, ref),
+              className: "ui-autocomplete__item__group",
+              __css: { h, minH, ...styles.group },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  AutocompleteOptionGroup
+};
+//# sourceMappingURL=chunk-FZM3BH3D.mjs.map

package/dist/chunk-FZM3BH3D.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete-option-group.tsx"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport type { UseAutocompleteOptionGroupProps } from \"./use-autocomplete-option-group\"\nimport { useAutocompleteOptionGroup } from \"./use-autocomplete-option-group\"\n\ninterface AutocompleteOptionGroupOptions\n  extends UseAutocompleteOptionGroupProps {}\n\nexport interface AutocompleteOptionGroupProps\n  extends HTMLUIProps<\"ul\">,\n    AutocompleteOptionGroupOptions {}\n\nexport const AutocompleteOptionGroup = forwardRef<\n  AutocompleteOptionGroupProps,\n  \"ul\"\n>(\n  (\n    { className, color, h, height, minH, minHeight, children, ...rest },\n    ref,\n  ) => {\n    const { styles } = useAutocompleteContext()\n    const { label, getContainerProps, getGroupProps } =\n      useAutocompleteOptionGroup(rest)\n\n    h ??= height\n    minH ??= minHeight\n\n    return (\n      <ui.li\n        className={cx(\n          \"ui-autocomplete__item\",\n          \"ui-autocomplete__item--group\",\n          className,\n        )}\n        __css={{ w: \"100%\", h: \"fit-content\", color }}\n        {...getContainerProps()}\n      >\n        <ui.span\n          className=\"ui-autocomplete__item__group-label\"\n          __css={styles.groupLabel}\n          lineClamp={1}\n        >\n          {label}\n        </ui.span>\n\n        <ui.ul\n          {...getGroupProps({}, ref)}\n          className=\"ui-autocomplete__item__group\"\n          __css={{ h, minH, ...styles.group }}\n        >\n          {children}\n        </ui.ul>\n      </ui.li>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AA4Bb,SASE,KATF;AAhBC,IAAM,0BAA0B;AAAA,EAIrC,CACE,EAAE,WAAW,OAAO,GAAG,QAAQ,MAAM,WAAW,UAAU,GAAG,KAAK,GAClE,QACG;AACH,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,OAAO,mBAAmB,cAAc,IAC9C,2BAA2B,IAAI;AAEjC,wBAAM;AACN,iCAAS;AAET,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO,EAAE,GAAG,QAAQ,GAAG,eAAe,MAAM;AAAA,QAC3C,GAAG,kBAAkB;AAAA,QAEtB;AAAA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,OAAO;AAAA,cACd,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA,UAEA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACE,GAAG,cAAc,CAAC,GAAG,GAAG;AAAA,cACzB,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,MAAM,GAAG,OAAO,MAAM;AAAA,cAEjC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}