@yamada-ui/autocomplete 1.5.3-dev-20240927133030 → 1.5.3-dev-20240927162227

package/dist/autocomplete-option.js

@@ -87,6 +87,34 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
     );
   }
 );
+AutocompleteIcon.displayName = "AutocompleteIcon";
+AutocompleteIcon.__ui__ = "AutocompleteIcon";
+var AutocompleteClearIcon = ({
+  className,
+  children,
+  ...props
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const { styles } = useAutocompleteContext();
+  const isDisabled = props.disabled;
+  const rest = (0, import_use_clickable.useClickable)({
+    ref,
+    isDisabled,
+    ...props
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AutocompleteIcon,
+    {
+      "aria-label": "Clear value",
+      className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
+      __css: styles.clearIcon,
+      ...rest,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
+    }
+  );
+};
+AutocompleteClearIcon.displayName = "AutocompleteClearIcon";
+AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
 var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useAutocompleteContext();
   const css = {
@@ -107,6 +135,8 @@ var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest },
     }
   );
 });
+AutocompleteItemIcon.displayName = "AutocompleteItemIcon";
+AutocompleteItemIcon.__ui__ = "AutocompleteItemIcon";
 
 // src/use-autocomplete-option.ts
 var import_utils3 = require("@yamada-ui/utils");
@@ -270,6 +300,8 @@ var AutocompleteOption = (0, import_core2.forwardRef)(
     );
   }
 );
+AutocompleteOption.displayName = "AutocompleteOption";
+AutocompleteOption.__ui__ = "AutocompleteOption";
 var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "polygon",
   {
@@ -277,6 +309,8 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { view
     points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
   }
 ) });
+CheckIcon.displayName = "CheckIcon";
+CheckIcon.__ui__ = "CheckIcon";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AutocompleteOption

package/dist/autocomplete-option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/autocomplete-option.tsx","../src/autocomplete-context.ts","../src/autocomplete-icon.tsx","../src/use-autocomplete-option.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport type { UseAutocompleteOptionProps } from \"./use-autocomplete-option\"\nimport { useAutocompleteOption } from \"./use-autocomplete-option\"\n\ninterface AutocompleteOptionOptions {\n  /**\n   * The autocomplete option icon to use.\n   */\n  icon?: ReactElement\n}\n\nexport interface AutocompleteOptionProps\n  extends UseAutocompleteOptionProps,\n    AutocompleteOptionOptions {}\n\nexport const AutocompleteOption = forwardRef<AutocompleteOptionProps, \"li\">(\n  ({ className, icon, ...rest }, ref) => {\n    const { styles } = useAutocompleteContext()\n    const { isSelected, customIcon, children, getOptionProps } =\n      useAutocompleteOption(rest)\n\n    icon ??= customIcon\n\n    const css: CSSUIObject = {\n      textDecoration: \"none\",\n      color: \"inherit\",\n      userSelect: \"none\",\n      display: \"flex\",\n      width: \"100%\",\n      alignItems: \"center\",\n      textAlign: \"start\",\n      flex: \"0 0 auto\",\n      outline: 0,\n      gap: \"0.75rem\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        className={cx(\"ui-autocomplete__item\", className)}\n        __css={css}\n        {...getOptionProps({}, ref)}\n      >\n        {icon !== null ? (\n          <AutocompleteItemIcon opacity={isSelected ? 1 : 0}>\n            {icon || <CheckIcon />}\n          </AutocompleteItemIcon>\n        ) : null}\n\n        <ui.span style={{ flex: 1 }} data-label>\n          {children}\n        </ui.span>\n      </ui.li>\n    )\n  },\n)\n\nconst CheckIcon: FC = () => (\n  <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n    <polygon\n      fill=\"currentColor\"\n      points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n    />\n  </svg>\n)\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n  DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n  useDescendantsContext: useAutocompleteDescendantsContext,\n  useDescendants: useAutocompleteDescendants,\n  useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n  extends Omit<\n    UseAutocompleteProps,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n  > {\n  value: string | string[]\n  label: string | string[] | undefined\n  inputValue: string\n  isHit: boolean\n  isEmpty: boolean\n  isAllSelected: boolean\n  onChange: (newValue: string, options?: ChangeOptions) => void\n  onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n  pickOptions: (value: string) => void\n  rebirthOptions: (runFocus?: boolean) => void\n  inputProps: DOMAttributes<HTMLInputElement>\n  isOpen: boolean\n  onOpen: () => void\n  onClose: () => void\n  onCreate: () => void\n  onFocusFirst: () => void\n  onFocusLast: () => void\n  onFocusNext: (index?: number) => void\n  onFocusPrev: (index?: number) => void\n  focusedIndex: number\n  setFocusedIndex: Dispatch<SetStateAction<number>>\n  listRef: RefObject<HTMLUListElement>\n  inputRef: RefObject<HTMLInputElement>\n  formControlProps: { [key: string]: any }\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n  createContext<AutocompleteContext>({\n    name: \"AutocompleteContext\",\n    errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n  })\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { FC, HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n  ({ className, children, __css, ...rest }, ref) => {\n    const { styles } = useAutocompleteContext()\n\n    const css: CSSUIObject = {\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      pointerEvents: \"none\",\n      cursor: \"pointer\",\n      ...styles.icon,\n      ...__css,\n    }\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) =>\n      cloneElement(child, {\n        focusable: false,\n        \"aria-hidden\": true,\n        style: {\n          maxWidth: \"1em\",\n          maxHeight: \"1em\",\n          color: \"currentColor\",\n        },\n      }),\n    )\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-autocomplete__icon\", className)}\n        __css={css}\n        {...rest}\n      >\n        {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n      </ui.div>\n    )\n  },\n)\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n  disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const { styles } = useAutocompleteContext()\n\n  const isDisabled = props.disabled\n\n  const rest = useClickable({\n    ref,\n    isDisabled,\n    ...(props as HTMLAttributes<HTMLElement>),\n  })\n\n  return (\n    <AutocompleteIcon\n      aria-label=\"Clear value\"\n      className={cx(\"ui-autocomplete__icon--clear\", className)}\n      __css={styles.clearIcon}\n      {...rest}\n    >\n      {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n    </AutocompleteIcon>\n  )\n}\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n  AutocompleteItemIconProps,\n  \"span\"\n>(({ className, ...rest }, ref) => {\n  const { styles } = useAutocompleteContext()\n\n  const css: CSSUIObject = {\n    flexShrink: 0,\n    display: \"inline-flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    fontSize: \"0.85em\",\n    ...styles.itemIcon,\n  }\n\n  return (\n    <ui.span\n      ref={ref}\n      className={cx(\"ui-autocomplete__item__icon\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n})\n","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isHTMLElement,\n  mergeRefs,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n  isHTMLElement(target) && !!target?.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n  extends Omit<HTMLUIProps<\"li\">, \"value\" | \"children\"> {\n  /**\n   * The value of the autocomplete option.\n   */\n  value?: string\n  /**\n   * The label of the autocomplete option.\n   */\n  children?: string\n  /**\n   * If `true`, the autocomplete option will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\n   */\n  isFocusable?: boolean\n  /**\n   * If `true`, the list element will be closed when selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n  const {\n    value,\n    omitSelectedValues,\n    onChange,\n    onChangeLabel,\n    focusedIndex,\n    setFocusedIndex,\n    onClose,\n    closeOnSelect: generalCloseOnSelect,\n    optionProps,\n    inputRef,\n    onFocusNext,\n  } = useAutocompleteContext()\n\n  let {\n    icon: customIcon,\n    isDisabled,\n    isFocusable,\n    closeOnSelect: customCloseOnSelect,\n    children,\n    value: optionValue,\n    ...computedProps\n  } = { ...optionProps, ...props }\n\n  const trulyDisabled = !!isDisabled && !isFocusable\n\n  const itemRef = useRef<HTMLLIElement>(null)\n\n  const { index, register, descendants } = useAutocompleteDescendant({\n    disabled: trulyDisabled,\n  })\n\n  const values = descendants.values()\n  const frontValues = values.slice(0, index)\n\n  const isMulti = isArray(value)\n  const isDuplicated = !isMulti\n    ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n    : false\n\n  const isSelected =\n    !isDuplicated &&\n    (!isMulti\n      ? (optionValue ?? \"\") === value\n      : value.includes(optionValue ?? \"\"))\n  const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n  const isFocused = index === focusedIndex\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLLIElement>) => {\n      ev.stopPropagation()\n\n      if (isDisabled) {\n        if (inputRef.current) inputRef.current.focus()\n\n        return\n      }\n\n      if (!isTargetOption(ev.currentTarget)) {\n        if (inputRef.current) inputRef.current.focus()\n\n        return\n      }\n\n      setFocusedIndex(index)\n\n      onChange(optionValue ?? \"\")\n\n      if (inputRef.current) inputRef.current.focus()\n\n      if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n      if (omitSelectedValues) onFocusNext(index)\n    },\n    [\n      onFocusNext,\n      omitSelectedValues,\n      isDisabled,\n      optionValue,\n      setFocusedIndex,\n      index,\n      onChange,\n      customCloseOnSelect,\n      generalCloseOnSelect,\n      onClose,\n      inputRef,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (isSelected) onChangeLabel(optionValue ?? \"\", { runOmit: false })\n  }, [optionValue])\n\n  const getOptionProps: PropGetter<\"li\"> = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        width: \"1px\",\n        margin: \"-1px\",\n        padding: \"0px\",\n        overflow: \"hidden\",\n        whiteSpace: \"nowrap\",\n        position: \"absolute\",\n      }\n\n      return {\n        ref: mergeRefs(itemRef, ref, register),\n        id: useId(),\n        role: \"option\",\n        ...computedProps,\n        ...props,\n        tabIndex: -1,\n        style:\n          !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n        \"data-target\": dataAttr(true),\n        \"data-value\": optionValue ?? \"\",\n        \"data-focus\": dataAttr(isFocused),\n        \"data-disabled\": dataAttr(isDisabled),\n        \"aria-checked\": isSelected,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n      }\n    },\n    [\n      optionValue,\n      computedProps,\n      isDisabled,\n      isFocused,\n      isSelected,\n      isTarget,\n      omitSelectedValues,\n      onClick,\n      register,\n    ],\n  )\n\n  return {\n    isSelected,\n    isFocused,\n    customIcon,\n    children,\n    getOptionProps,\n  }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n  typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n  const { isHit, onCreate } = useAutocompleteContext()\n\n  const getCreateProps: PropGetter<\"li\"> = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        width: \"1px\",\n        margin: \"-1px\",\n        padding: \"0px\",\n        overflow: \"hidden\",\n        whiteSpace: \"nowrap\",\n        position: \"absolute\",\n      }\n\n      return {\n        ref,\n        ...props,\n        tabIndex: -1,\n        style: isHit ? style : undefined,\n        \"data-focus\": dataAttr(!isHit),\n        onClick: handlerAll(props.onClick, onCreate),\n      }\n    },\n    [isHit, onCreate],\n  )\n\n  return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n  typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n  const { isHit, isEmpty } = useAutocompleteContext()\n\n  const getEmptyProps: PropGetter<\"li\"> = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        width: \"1px\",\n        margin: \"-1px\",\n        padding: \"0px\",\n        overflow: \"hidden\",\n        whiteSpace: \"nowrap\",\n        position: \"absolute\",\n      }\n\n      return {\n        ref,\n        ...props,\n        tabIndex: -1,\n        style: isHit && !isEmpty ? style : undefined,\n      }\n    },\n    [isHit, isEmpty],\n  )\n\n  return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","import_utils","import_react","props","import_jsx_runtime"]}
+{"version":3,"sources":["../src/autocomplete-option.tsx","../src/autocomplete-context.ts","../src/autocomplete-icon.tsx","../src/use-autocomplete-option.ts"],"sourcesContent":["import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport type { UseAutocompleteOptionProps } from \"./use-autocomplete-option\"\nimport { useAutocompleteOption } from \"./use-autocomplete-option\"\n\ninterface AutocompleteOptionOptions {\n  /**\n   * The autocomplete option icon to use.\n   */\n  icon?: ReactElement\n}\n\nexport interface AutocompleteOptionProps\n  extends UseAutocompleteOptionProps,\n    AutocompleteOptionOptions {}\n\nexport const AutocompleteOption = forwardRef<AutocompleteOptionProps, \"li\">(\n  ({ className, icon, ...rest }, ref) => {\n    const { styles } = useAutocompleteContext()\n    const { isSelected, customIcon, children, getOptionProps } =\n      useAutocompleteOption(rest)\n\n    icon ??= customIcon\n\n    const css: CSSUIObject = {\n      textDecoration: \"none\",\n      color: \"inherit\",\n      userSelect: \"none\",\n      display: \"flex\",\n      width: \"100%\",\n      alignItems: \"center\",\n      textAlign: \"start\",\n      flex: \"0 0 auto\",\n      outline: 0,\n      gap: \"0.75rem\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        className={cx(\"ui-autocomplete__item\", className)}\n        __css={css}\n        {...getOptionProps({}, ref)}\n      >\n        {icon !== null ? (\n          <AutocompleteItemIcon opacity={isSelected ? 1 : 0}>\n            {icon || <CheckIcon />}\n          </AutocompleteItemIcon>\n        ) : null}\n\n        <ui.span style={{ flex: 1 }} data-label>\n          {children}\n        </ui.span>\n      </ui.li>\n    )\n  },\n)\n\nAutocompleteOption.displayName = \"AutocompleteOption\"\nAutocompleteOption.__ui__ = \"AutocompleteOption\"\n\nconst CheckIcon: FC = () => (\n  <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n    <polygon\n      fill=\"currentColor\"\n      points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n    />\n  </svg>\n)\n\nCheckIcon.displayName = \"CheckIcon\"\nCheckIcon.__ui__ = \"CheckIcon\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n  DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n  useDescendantsContext: useAutocompleteDescendantsContext,\n  useDescendants: useAutocompleteDescendants,\n  useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n  extends Omit<\n    UseAutocompleteProps,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n  > {\n  value: string | string[]\n  label: string | string[] | undefined\n  inputValue: string\n  isHit: boolean\n  isEmpty: boolean\n  isAllSelected: boolean\n  onChange: (newValue: string, options?: ChangeOptions) => void\n  onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n  pickOptions: (value: string) => void\n  rebirthOptions: (runFocus?: boolean) => void\n  inputProps: DOMAttributes<HTMLInputElement>\n  isOpen: boolean\n  onOpen: () => void\n  onClose: () => void\n  onCreate: () => void\n  onFocusFirst: () => void\n  onFocusLast: () => void\n  onFocusNext: (index?: number) => void\n  onFocusPrev: (index?: number) => void\n  focusedIndex: number\n  setFocusedIndex: Dispatch<SetStateAction<number>>\n  listRef: RefObject<HTMLUListElement>\n  inputRef: RefObject<HTMLInputElement>\n  formControlProps: { [key: string]: any }\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n  createContext<AutocompleteContext>({\n    name: \"AutocompleteContext\",\n    errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n  })\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n  ({ className, children, __css, ...rest }, ref) => {\n    const { styles } = useAutocompleteContext()\n\n    const css: CSSUIObject = {\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      pointerEvents: \"none\",\n      cursor: \"pointer\",\n      ...styles.icon,\n      ...__css,\n    }\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) =>\n      cloneElement(child, {\n        focusable: false,\n        \"aria-hidden\": true,\n        style: {\n          maxWidth: \"1em\",\n          maxHeight: \"1em\",\n          color: \"currentColor\",\n        },\n      }),\n    )\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-autocomplete__icon\", className)}\n        __css={css}\n        {...rest}\n      >\n        {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n      </ui.div>\n    )\n  },\n)\n\nAutocompleteIcon.displayName = \"AutocompleteIcon\"\nAutocompleteIcon.__ui__ = \"AutocompleteIcon\"\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n  disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const { styles } = useAutocompleteContext()\n\n  const isDisabled = props.disabled\n\n  const rest = useClickable({\n    ref,\n    isDisabled,\n    ...(props as HTMLAttributes<HTMLElement>),\n  })\n\n  return (\n    <AutocompleteIcon\n      aria-label=\"Clear value\"\n      className={cx(\"ui-autocomplete__icon--clear\", className)}\n      __css={styles.clearIcon}\n      {...rest}\n    >\n      {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n    </AutocompleteIcon>\n  )\n}\n\nAutocompleteClearIcon.displayName = \"AutocompleteClearIcon\"\nAutocompleteClearIcon.__ui__ = \"AutocompleteClearIcon\"\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n  AutocompleteItemIconProps,\n  \"span\"\n>(({ className, ...rest }, ref) => {\n  const { styles } = useAutocompleteContext()\n\n  const css: CSSUIObject = {\n    flexShrink: 0,\n    display: \"inline-flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    fontSize: \"0.85em\",\n    ...styles.itemIcon,\n  }\n\n  return (\n    <ui.span\n      ref={ref}\n      className={cx(\"ui-autocomplete__item__icon\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n})\n\nAutocompleteItemIcon.displayName = \"AutocompleteItemIcon\"\nAutocompleteItemIcon.__ui__ = \"AutocompleteItemIcon\"\n","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isHTMLElement,\n  mergeRefs,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n  isHTMLElement(target) && !!target?.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n  extends Omit<HTMLUIProps<\"li\">, \"value\" | \"children\"> {\n  /**\n   * The value of the autocomplete option.\n   */\n  value?: string\n  /**\n   * The label of the autocomplete option.\n   */\n  children?: string\n  /**\n   * If `true`, the autocomplete option will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\n   */\n  isFocusable?: boolean\n  /**\n   * If `true`, the list element will be closed when selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n  const {\n    value,\n    omitSelectedValues,\n    onChange,\n    onChangeLabel,\n    focusedIndex,\n    setFocusedIndex,\n    onClose,\n    closeOnSelect: generalCloseOnSelect,\n    optionProps,\n    inputRef,\n    onFocusNext,\n  } = useAutocompleteContext()\n\n  let {\n    icon: customIcon,\n    isDisabled,\n    isFocusable,\n    closeOnSelect: customCloseOnSelect,\n    children,\n    value: optionValue,\n    ...computedProps\n  } = { ...optionProps, ...props }\n\n  const trulyDisabled = !!isDisabled && !isFocusable\n\n  const itemRef = useRef<HTMLLIElement>(null)\n\n  const { index, register, descendants } = useAutocompleteDescendant({\n    disabled: trulyDisabled,\n  })\n\n  const values = descendants.values()\n  const frontValues = values.slice(0, index)\n\n  const isMulti = isArray(value)\n  const isDuplicated = !isMulti\n    ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n    : false\n\n  const isSelected =\n    !isDuplicated &&\n    (!isMulti\n      ? (optionValue ?? \"\") === value\n      : value.includes(optionValue ?? \"\"))\n  const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n  const isFocused = index === focusedIndex\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLLIElement>) => {\n      ev.stopPropagation()\n\n      if (isDisabled) {\n        if (inputRef.current) inputRef.current.focus()\n\n        return\n      }\n\n      if (!isTargetOption(ev.currentTarget)) {\n        if (inputRef.current) inputRef.current.focus()\n\n        return\n      }\n\n      setFocusedIndex(index)\n\n      onChange(optionValue ?? \"\")\n\n      if (inputRef.current) inputRef.current.focus()\n\n      if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n      if (omitSelectedValues) onFocusNext(index)\n    },\n    [\n      onFocusNext,\n      omitSelectedValues,\n      isDisabled,\n      optionValue,\n      setFocusedIndex,\n      index,\n      onChange,\n      customCloseOnSelect,\n      generalCloseOnSelect,\n      onClose,\n      inputRef,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (isSelected) onChangeLabel(optionValue ?? \"\", { runOmit: false })\n  }, [optionValue])\n\n  const getOptionProps: PropGetter<\"li\"> = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        width: \"1px\",\n        margin: \"-1px\",\n        padding: \"0px\",\n        overflow: \"hidden\",\n        whiteSpace: \"nowrap\",\n        position: \"absolute\",\n      }\n\n      return {\n        ref: mergeRefs(itemRef, ref, register),\n        id: useId(),\n        role: \"option\",\n        ...computedProps,\n        ...props,\n        tabIndex: -1,\n        style:\n          !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n        \"data-target\": dataAttr(true),\n        \"data-value\": optionValue ?? \"\",\n        \"data-focus\": dataAttr(isFocused),\n        \"data-disabled\": dataAttr(isDisabled),\n        \"aria-checked\": isSelected,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n      }\n    },\n    [\n      optionValue,\n      computedProps,\n      isDisabled,\n      isFocused,\n      isSelected,\n      isTarget,\n      omitSelectedValues,\n      onClick,\n      register,\n    ],\n  )\n\n  return {\n    isSelected,\n    isFocused,\n    customIcon,\n    children,\n    getOptionProps,\n  }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n  typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n  const { isHit, onCreate } = useAutocompleteContext()\n\n  const getCreateProps: PropGetter<\"li\"> = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        width: \"1px\",\n        margin: \"-1px\",\n        padding: \"0px\",\n        overflow: \"hidden\",\n        whiteSpace: \"nowrap\",\n        position: \"absolute\",\n      }\n\n      return {\n        ref,\n        ...props,\n        tabIndex: -1,\n        style: isHit ? style : undefined,\n        \"data-focus\": dataAttr(!isHit),\n        onClick: handlerAll(props.onClick, onCreate),\n      }\n    },\n    [isHit, onCreate],\n  )\n\n  return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n  typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n  const { isHit, isEmpty } = useAutocompleteContext()\n\n  const getEmptyProps: PropGetter<\"li\"> = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        width: \"1px\",\n        margin: \"-1px\",\n        padding: \"0px\",\n        overflow: \"hidden\",\n        whiteSpace: \"nowrap\",\n        position: \"absolute\",\n      }\n\n      return {\n        ref,\n        ...props,\n        tabIndex: -1,\n        style: isHit && !isEmpty ? style : undefined,\n      }\n    },\n    [isHit, isEmpty],\n  )\n\n  return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","import_utils","import_react","props","import_jsx_runtime"]}

package/dist/autocomplete-option.mjs

@@ -1,9 +1,9 @@
 "use client"
 import {
   AutocompleteOption
-} from "./chunk-V3FMPDN3.mjs";
+} from "./chunk-OTVG42AD.mjs";
 import "./chunk-2JAGPELI.mjs";
-import "./chunk-JXFXCGZK.mjs";
+import "./chunk-7SWSKLSA.mjs";
 import "./chunk-JPUKYLBW.mjs";
 export {
   AutocompleteOption

package/dist/autocomplete.js

@@ -93,6 +93,34 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
     );
   }
 );
+AutocompleteIcon.displayName = "AutocompleteIcon";
+AutocompleteIcon.__ui__ = "AutocompleteIcon";
+var AutocompleteClearIcon = ({
+  className,
+  children,
+  ...props
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const { styles } = useAutocompleteContext();
+  const isDisabled = props.disabled;
+  const rest = (0, import_use_clickable.useClickable)({
+    ref,
+    isDisabled,
+    ...props
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AutocompleteIcon,
+    {
+      "aria-label": "Clear value",
+      className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
+      __css: styles.clearIcon,
+      ...rest,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
+    }
+  );
+};
+AutocompleteClearIcon.displayName = "AutocompleteClearIcon";
+AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
 var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useAutocompleteContext();
   const css = {
@@ -113,6 +141,8 @@ var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest },
     }
   );
 });
+AutocompleteItemIcon.displayName = "AutocompleteItemIcon";
+AutocompleteItemIcon.__ui__ = "AutocompleteItemIcon";
 
 // src/use-autocomplete-option.ts
 var import_utils3 = require("@yamada-ui/utils");
@@ -330,6 +360,8 @@ var AutocompleteCreate = (0, import_core2.forwardRef)(
     );
   }
 );
+AutocompleteCreate.displayName = "AutocompleteCreate";
+AutocompleteCreate.__ui__ = "AutocompleteCreate";
 var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "path",
   {
@@ -337,6 +369,8 @@ var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewB
     d: "M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141   c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27   c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435   c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z"
   }
 ) });
+PlusIcon.displayName = "PlusIcon";
+PlusIcon.__ui__ = "PlusIcon";
 
 // src/autocomplete-empty.tsx
 var import_core3 = require("@yamada-ui/core");
@@ -375,6 +409,8 @@ var AutocompleteEmpty = (0, import_core3.forwardRef)(
     );
   }
 );
+AutocompleteEmpty.displayName = "AutocompleteEmpty";
+AutocompleteEmpty.__ui__ = "AutocompleteEmpty";
 var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "path",
   {
@@ -382,6 +418,8 @@ var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { view
     d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
   }
 ) });
+MinusIcon.displayName = "MinusIcon";
+MinusIcon.__ui__ = "MinusIcon";
 
 // src/autocomplete-list.tsx
 var import_core4 = require("@yamada-ui/core");
@@ -517,6 +555,8 @@ var AutocompleteList = (0, import_core4.forwardRef)(
     );
   }
 );
+AutocompleteList.displayName = "AutocompleteList";
+AutocompleteList.__ui__ = "AutocompleteList";
 
 // src/use-autocomplete.tsx
 var import_core8 = require("@yamada-ui/core");
@@ -563,6 +603,8 @@ var AutocompleteOption = (0, import_core5.forwardRef)(
     );
   }
 );
+AutocompleteOption.displayName = "AutocompleteOption";
+AutocompleteOption.__ui__ = "AutocompleteOption";
 var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   "polygon",
   {
@@ -570,6 +612,8 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { view
     points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
   }
 ) });
+CheckIcon.displayName = "CheckIcon";
+CheckIcon.__ui__ = "CheckIcon";
 
 // src/autocomplete-option-group.tsx
 var import_core7 = require("@yamada-ui/core");
@@ -696,6 +740,8 @@ var AutocompleteOptionGroup = (0, import_core7.forwardRef)(
     );
   }
 );
+AutocompleteOptionGroup.displayName = "AutocompleteOptionGroup";
+AutocompleteOptionGroup.__ui__ = "AutocompleteOptionGroup";
 
 // src/use-autocomplete.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -1731,6 +1777,8 @@ var Autocomplete = (0, import_core9.forwardRef)(
     ) });
   }
 );
+Autocomplete.displayName = "Autocomplete";
+Autocomplete.__ui__ = "Autocomplete";
 var AutocompleteField = (0, import_core9.forwardRef)(
   ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
     const { label, inputValue, styles } = useAutocompleteContext();
@@ -1767,6 +1815,8 @@ var AutocompleteField = (0, import_core9.forwardRef)(
     ) });
   }
 );
+AutocompleteField.displayName = "AutocompleteField";
+AutocompleteField.__ui__ = "AutocompleteField";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Autocomplete