@yamada-ui/autocomplete/dist/autocomplete-option.js

Yamada UI autocomplete component

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/autocomplete-option.tsx
var autocomplete_option_exports = {};
__export(autocomplete_option_exports, {
  AutocompleteOption: () => AutocompleteOption
});
module.exports = __toCommonJS(autocomplete_option_exports);
var import_core2 = require("@yamada-ui/core");
var import_utils4 = require("@yamada-ui/utils");

// src/autocomplete-context.ts
var import_use_descendant = require("@yamada-ui/use-descendant");
var import_utils = require("@yamada-ui/utils");
var {
  DescendantsContextProvider: AutocompleteDescendantsContextProvider,
  useDescendant: useAutocompleteDescendant,
  useDescendants: useAutocompleteDescendants,
  useDescendantsContext: useAutocompleteDescendantsContext
} = (0, import_use_descendant.createDescendant)();
var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
  name: "AutocompleteContext",
  errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
});

// src/autocomplete-icon.tsx
var import_core = require("@yamada-ui/core");
var import_icon = require("@yamada-ui/icon");
var import_use_clickable = require("@yamada-ui/use-clickable");
var import_utils2 = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var AutocompleteIcon = (0, import_core.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 = (0, import_utils2.getValidChildren)(children);
    const cloneChildren = validChildren.map(
      (child) => (0, import_react.cloneElement)(child, {
        style: {
          color: "currentColor",
          maxHeight: "1em",
          maxWidth: "1em"
        },
        "aria-hidden": true,
        focusable: false
      })
    );
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_core.ui.div,
      {
        ref,
        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
        __css: css,
        ...rest,
        children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
      }
    );
  }
);
AutocompleteIcon.displayName = "AutocompleteIcon";
AutocompleteIcon.__ui__ = "AutocompleteIcon";
var AutocompleteClearIcon = ({
  className,
  children,
  ...props
}) => {
  const ref = (0, import_react.useRef)(null);
  const { styles } = useAutocompleteContext();
  const rest = (0, import_use_clickable.useClickable)({
    ref,
    ...props
  });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    AutocompleteIcon,
    {
      className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
      "aria-label": "Clear value",
      __css: styles.clearIcon,
      ...rest,
      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { h: "0.5em", w: "0.5em" })
    }
  );
};
AutocompleteClearIcon.displayName = "AutocompleteClearIcon";
AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
var AutocompleteItemIcon = (0, import_core.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__ */ (0, import_jsx_runtime.jsx)(
    import_core.ui.span,
    {
      ref,
      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
      __css: css,
      ...rest
    }
  );
});
AutocompleteItemIcon.displayName = "AutocompleteItemIcon";
AutocompleteItemIcon.__ui__ = "AutocompleteItemIcon";

// src/use-autocomplete-option.ts
var import_utils3 = require("@yamada-ui/utils");
var import_react2 = require("react");
var isTargetOption = (target) => {
  var _a;
  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
};
var useAutocompleteOption = (props) => {
  var _a, _b;
  const {
    closeOnSelect,
    focusedIndex,
    inputRef,
    omitSelectedValues,
    setFocusedIndex,
    value: selectedValue,
    optionProps,
    onChange,
    onClose,
    onFocusNext
  } = useAutocompleteContext();
  const uuid = (0, import_react2.useId)();
  const itemRef = (0, import_react2.useRef)(null);
  const {
    id = uuid,
    children,
    closeOnSelect: customCloseOnSelect,
    isDisabled,
    disabled = isDisabled,
    isFocusable,
    focusable = isFocusable,
    icon: customIcon,
    value: optionValue,
    ...computedProps
  } = { ...optionProps, ...props };
  const trulyDisabled = !!disabled && !focusable;
  const { descendants, index, register } = useAutocompleteDescendant({
    disabled: trulyDisabled
  });
  const values = descendants.values();
  const frontValues = values.slice(0, index);
  const multi = (0, import_utils3.isArray)(selectedValue);
  const target = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
  const focused = index === focusedIndex;
  const value = (0, import_react2.useMemo)(() => {
    let value2 = optionValue;
    if ((0, import_utils3.isUndefined)(optionValue)) {
      if ((0, import_utils3.isString)(children) || (0, import_utils3.isNumber)(children)) {
        value2 = children.toString();
      } else {
        console.warn(
          `${!multi ? "Autocomplete" : "MultiAutocomplete"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
        );
      }
    }
    return value2 != null ? value2 : "";
  }, [children, multi, optionValue]);
  const duplicated = frontValues.some(
    ({ node }) => node.dataset.value === value
  );
  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
  const onClick = (0, import_react2.useCallback)(
    (ev) => {
      ev.stopPropagation();
      if (disabled || !isTargetOption(ev.currentTarget)) {
        if (inputRef.current) inputRef.current.focus();
        return;
      }
      if (!duplicated) setFocusedIndex(index);
      onChange(value);
      if (inputRef.current) inputRef.current.focus();
      if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
      if (omitSelectedValues) onFocusNext(index);
    },
    [
      duplicated,
      onFocusNext,
      omitSelectedValues,
      disabled,
      value,
      setFocusedIndex,
      index,
      onChange,
      customCloseOnSelect,
      closeOnSelect,
      onClose,
      inputRef
    ]
  );
  const getOptionProps = (0, import_react2.useCallback)(
    (props2 = {}, ref = null) => {
      const hidden = !target || omitSelectedValues && selected;
      const style = {
        border: "0px",
        clip: "rect(0px, 0px, 0px, 0px)",
        height: "1px",
        margin: "-1px",
        overflow: "hidden",
        padding: "0px",
        position: "absolute",
        whiteSpace: "nowrap",
        width: "1px"
      };
      return {
        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
        role: "option",
        ...computedProps,
        ...props2,
        id,
        style: hidden ? style : void 0,
        "aria-disabled": (0, import_utils3.ariaAttr)(disabled),
        "aria-hidden": (0, import_utils3.ariaAttr)(hidden),
        "aria-selected": selected,
        "data-disabled": (0, import_utils3.dataAttr)(disabled),
        "data-duplicated": (0, import_utils3.dataAttr)(duplicated),
        "data-focus": (0, import_utils3.dataAttr)(focused),
        "data-target": (0, import_utils3.dataAttr)(true),
        "data-value": value,
        tabIndex: -1,
        onClick: (0, import_utils3.handlerAll)(computedProps.onClick, props2.onClick, onClick)
      };
    },
    [
      id,
      duplicated,
      value,
      computedProps,
      disabled,
      focused,
      selected,
      target,
      omitSelectedValues,
      onClick,
      register
    ]
  );
  return {
    target,
    children,
    customIcon,
    focused,
    omitSelectedValues,
    selected,
    getOptionProps
  };
};

// src/autocomplete-option.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var AutocompleteOption = (0, import_core2.forwardRef)(
  ({ className, icon, ...rest }, ref) => {
    const { styles } = useAutocompleteContext();
    const { children, customIcon, selected, getOptionProps } = useAutocompleteOption(rest);
    icon != null ? icon : icon = customIcon;
    const css = {
      alignItems: "center",
      color: "inherit",
      display: "flex",
      flex: "0 0 auto",
      gap: "0.75rem",
      outline: 0,
      textAlign: "start",
      textDecoration: "none",
      userSelect: "none",
      width: "100%",
      ...styles.item
    };
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
      import_core2.ui.div,
      {
        className: (0, import_utils4.cx)("ui-autocomplete__item", className),
        __css: css,
        ...getOptionProps({}, ref),
        children: [
          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteCheckIcon, {}) }) : null,
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, "data-label": true, children })
        ]
      }
    );
  }
);
AutocompleteOption.displayName = "AutocompleteOption";
AutocompleteOption.__ui__ = "AutocompleteOption";
var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
  "polygon",
  {
    fill: "currentColor",
    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
  }
) });
AutocompleteCheckIcon.displayName = "AutocompleteCheckIcon";
AutocompleteCheckIcon.__ui__ = "AutocompleteCheckIcon";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  AutocompleteOption
});
//# sourceMappingURL=autocomplete-option.js.map