@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/cjs/utils/isCssPropertySupported.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isCssPropertySupported = void 0;
+var isCssPropertySupported = exports.isCssPropertySupported = function isCssPropertySupported(prop, value) {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  var div = document.createElement("div");
+  div.style[prop] = value;
+  return div.style[prop] === value;
+};

package/dist/cjs/utils/isNil.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Checks if `value` is `null` or `undefined`.
+ * (code stolen from lodash)
+ *
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is nullish, else `false`.
+ * @example
+ *
+ * isNil(null);
+ * // => true
+ *
+ * isNil(void 0);
+ * // => true
+ *
+ * isNil(NaN);
+ * // => false
+ */
+export declare const isNil: (value: any) => value is null | undefined;

package/dist/cjs/utils/isNil.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNil = void 0;
+/**
+ * Checks if `value` is `null` or `undefined`.
+ * (code stolen from lodash)
+ *
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is nullish, else `false`.
+ * @example
+ *
+ * isNil(null);
+ * // => true
+ *
+ * isNil(void 0);
+ * // => true
+ *
+ * isNil(NaN);
+ * // => false
+ */
+var isNil = exports.isNil = function isNil(value) {
+  return value == null;
+};

package/dist/cjs/utils/isReactText.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from "react";
+export declare const isReactText: (children: ReactNode) => children is string | number;

package/dist/cjs/utils/isReactText.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isReactText = void 0;
+var isReactText = exports.isReactText = function isReactText(children) {
+  return typeof children === "string" || typeof children === "number";
+};

package/dist/cjs/utils/isRenderedChild.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+/**
+ * Returns whether a React child would be rendered or not.
+ * See https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
+ * @param child
+ */
+export declare const isRenderedChild: (child: ReactNode) => boolean;

package/dist/cjs/utils/isRenderedChild.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isRenderedChild = void 0;
+/**
+ * Returns whether a React child would be rendered or not.
+ * See https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
+ * @param child
+ */
+var isRenderedChild = exports.isRenderedChild = function isRenderedChild(child) {
+  return child !== null && typeof child !== "boolean" && typeof child !== "undefined";
+};

package/dist/cjs/utils/matchLocation.d.ts

@@ -0,0 +1,2 @@
+export declare type LocationSubset = Pick<Location, "pathname">;
+export declare const matchLocation: (href: string, location: LocationSubset) => boolean;

package/dist/cjs/utils/matchLocation.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.matchLocation = void 0;
+var _parseUrl = require("./parseUrl");
+var matchLocation = exports.matchLocation = function matchLocation(href, location) {
+  return (location.pathname || "").startsWith((0, _parseUrl.parseURL)(href).pathname);
+};

package/dist/cjs/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import type { LegacyRef, MutableRefObject, RefCallback } from "react";
+export declare function mergeRefs<T = any>(refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T>;

package/dist/cjs/utils/mergeRefs.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeRefs = mergeRefs;
+function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}

package/dist/cjs/utils/onlyText.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from "react";
+export declare const onlyText: (children: ReactNode | ReactNode[]) => string;

package/dist/cjs/utils/onlyText.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onlyText = void 0;
+var _react = require("react");
+var hasChildren = function hasChildren(element) {
+  return /*#__PURE__*/(0, _react.isValidElement)(element) && Boolean(element.props.children);
+};
+var childToString = function childToString(child) {
+  if (typeof child === "undefined" || child === null || typeof child === "boolean") {
+    return "";
+  }
+  if (JSON.stringify(child) === "{}") {
+    return "";
+  }
+  return child.toString();
+};
+
+// Code stolen from `react-children-utils`
+// @see https://github.com/fernandopasik/react-children-utilities/blob/main/src/lib/onlyText.ts
+var onlyText = exports.onlyText = function onlyText(children) {
+  if (!(children instanceof Array) && ! /*#__PURE__*/(0, _react.isValidElement)(children)) {
+    return childToString(children);
+  }
+  return _react.Children.toArray(children).reduce(function (text, child) {
+    var newText = "";
+    if ( /*#__PURE__*/(0, _react.isValidElement)(child) && hasChildren(child)) {
+      newText = onlyText(child.props.children);
+    } else if ( /*#__PURE__*/(0, _react.isValidElement)(child) && !hasChildren(child)) {
+      newText = "";
+    } else {
+      newText = childToString(child);
+    }
+    return text.concat(newText);
+  }, "");
+};

package/dist/cjs/utils/parseUrl.d.ts

@@ -0,0 +1,10 @@
+export declare const parseURL: (url: string) => {
+    protocol: string;
+    host: string;
+    hostname: string;
+    port: string;
+    pathname: string;
+    search: string;
+    hash: string;
+};
+export declare type ParsedLocation = ReturnType<typeof parseURL>;

package/dist/cjs/utils/parseUrl.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseURL = void 0;
+var parseURL = exports.parseURL = function parseURL(url) {
+  var parser = document.createElement("a");
+  // Let the browser do the work
+  parser.href = url;
+  return {
+    protocol: parser.protocol,
+    host: parser.host,
+    hostname: parser.hostname,
+    port: parser.port,
+    pathname: parser.pathname,
+    search: parser.search,
+    hash: parser.hash
+  };
+};

package/dist/cjs/utils/pluralize.d.ts

@@ -0,0 +1,6 @@
+interface Options {
+    plural?: string;
+    numberFormatter?: (number: number) => string;
+}
+export declare function pluralize(count: number, word: string, options?: Options): string;
+export {};

package/dist/cjs/utils/pluralize.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluralize = pluralize;
+var DEFAULT_OPTIONS = {
+  numberFormatter: function numberFormatter(number) {
+    return String(number);
+  }
+};
+function pluralize(count, word, options) {
+  var _Object$assign = Object.assign({}, DEFAULT_OPTIONS, options),
+    plural = _Object$assign.plural,
+    numberFormatter = _Object$assign.numberFormatter;
+  var formattedNumber = numberFormatter(count);
+  if (count === 1) {
+    return "".concat(formattedNumber, " ").concat(word);
+  }
+  return "".concat(formattedNumber, " ").concat(plural || "".concat(word, "s"));
+}

package/dist/cjs/utils/prefersReducedMotion.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Checks if the user has `prefers-reduced-motion` enabled
+ *
+ * @returns {boolean}
+ */
+export declare const prefersReducedMotion: boolean;

package/dist/cjs/utils/prefersReducedMotion.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prefersReducedMotion = void 0;
+var _window$matchMedia, _window;
+/**
+ * Checks if the user has `prefers-reduced-motion` enabled
+ *
+ * @returns {boolean}
+ */
+var prefersReducedMotion = exports.prefersReducedMotion = typeof window !== "undefined" && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-reduced-motion: reduce)").matches) === true;

package/dist/cjs/utils/range.d.ts

@@ -0,0 +1 @@
+export declare function range(start: number, end: number): number[];

package/dist/cjs/utils/range.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.range = range;
+function range(start, end) {
+  if (start >= end) throw "Start should be greater than end";
+  return Array(Math.abs(end - start)).fill(undefined).map(function (_, idx) {
+    return start + idx;
+  });
+}

package/dist/cjs/utils/sortObjectAlphabetically.d.ts

@@ -0,0 +1 @@
+export declare function sortObjectAlphabetically(obj: Record<string, any>): Record<string, any>;

package/dist/cjs/utils/sortObjectAlphabetically.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortObjectAlphabetically = sortObjectAlphabetically;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+function sortObjectAlphabetically(obj) {
+  var sortedEntries = Object.entries(obj).sort(function (_ref, _ref2) {
+    var _ref3 = (0, _slicedToArray2["default"])(_ref, 1),
+      keyA = _ref3[0];
+    var _ref4 = (0, _slicedToArray2["default"])(_ref2, 1),
+      keyB = _ref4[0];
+    return keyA.localeCompare(keyB);
+  });
+  return Object.fromEntries(sortedEntries);
+}

package/dist/cjs/utils/toSentenceCase.d.ts

@@ -0,0 +1,2 @@
+/** Converts PascalCase and camelCase to Sentence case */
+export declare const toSentenceCase: (str: string) => string;

package/dist/cjs/utils/toSentenceCase.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toSentenceCase = void 0;
+var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
+/** Converts PascalCase and camelCase to Sentence case */
+var toSentenceCase = exports.toSentenceCase = function toSentenceCase(str) {
+  var firstChar = str.charAt(0);
+  var remainingChars = str.slice(1).replace(/\s/g, "").replace(/([A-Z]+)/g, "$1").replace(/([A-Z][a-z])/g, " $1").trim();
+  return (0, _capitalize["default"])("".concat(firstChar).concat(remainingChars));
+};

package/dist/cjs/utils/uniqBy.d.ts

@@ -0,0 +1 @@
+export declare function uniqBy<T>(arr: T[], identity: (item: T) => any): T[];

package/dist/cjs/utils/uniqBy.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uniqBy = uniqBy;
+function uniqBy(arr, identity) {
+  if (!arr) return arr;
+  var memo = [];
+  return arr.filter(function (item) {
+    var id = identity(item);
+    if (memo.includes(id)) {
+      return false;
+    }
+    memo.push(id);
+    return true;
+  });
+}

package/dist/cjs/utils/uniqueId.d.ts

@@ -0,0 +1 @@
+export declare function uniqueId(prefix?: string): string;

package/dist/cjs/utils/uniqueId.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uniqueId = uniqueId;
+var counters = {};
+function uniqueId() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "id";
+  counters[prefix] = counters[prefix] === undefined ? 0 : counters[prefix] + 1;
+  return prefix + counters[prefix];
+}

package/dist/cjs/utils/useForwardedRef.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject, Ref } from "react";
+export declare function useForwardedRef<T>(externalRef: Ref<T | null> | undefined): [(instance: T | null) => void, MutableRefObject<T | null>];

package/dist/cjs/utils/useForwardedRef.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useForwardedRef = useForwardedRef;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+function useForwardedRef(externalRef) {
+  var ref = (0, _react.useRef)(externalRef && (0, _typeof2["default"])(externalRef) === "object" ? externalRef.current : null);
+  var refCallback = (0, _react.useCallback)(function (value) {
+    ref.current = value;
+    if (!externalRef) {
+      return;
+    } else if (typeof externalRef === "function") {
+      externalRef(value);
+    } else {
+      externalRef.current = value;
+    }
+  }, [externalRef]);
+  return [refCallback, ref];
+}

package/dist/cjs/utils/useLinkProps.d.ts

@@ -0,0 +1,6 @@
+import type { AnchorHTMLAttributes } from "react";
+export declare type UseLinkPropsArgs = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel" | "role" | "tabIndex"> & {
+    disabled?: boolean;
+};
+export declare type UseLinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel" | "role" | "tabIndex" | "aria-disabled">;
+export declare const useLinkProps: (props: UseLinkPropsArgs) => UseLinkProps;

package/dist/cjs/utils/useLinkProps.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLinkProps = void 0;
+var _react = require("react");
+var _SatelliteContext = require("../Satellite/SatelliteContext");
+var _parseUrl = require("./parseUrl");
+var useLinkProps = exports.useLinkProps = function useLinkProps(props) {
+  var _props$target, _props$rel;
+  var _useSatelliteContext = (0, _SatelliteContext.useSatelliteContext)(),
+    router = _useSatelliteContext.router;
+  var onClick = function onClick(evt) {
+    if (props.onClick) {
+      props.onClick(evt);
+    }
+    if (!props.href) {
+      return;
+    }
+    var isLeftClick = evt.button === 0;
+    var isModifierKeyPressed = Boolean(evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey);
+    var hasTarget = Boolean(evt.currentTarget.target);
+    if (isLeftClick && !isModifierKeyPressed && !hasTarget && !evt.defaultPrevented && evt.currentTarget.href) {
+      evt.preventDefault();
+      router.push({
+        url: evt.currentTarget.href
+      });
+    }
+  };
+  var href = router.transformHref(props.href || "");
+  var parsedLocation = (0, _react.useMemo)(function () {
+    return (0, _parseUrl.parseURL)(href);
+  }, [href]);
+  var isExternal = router.isExternalLocation(parsedLocation);
+  var target = (_props$target = props.target) !== null && _props$target !== void 0 ? _props$target : router.shouldOpenInNewTab(parsedLocation) ? "_blank" : undefined;
+  var rel = (_props$rel = props.rel) !== null && _props$rel !== void 0 ? _props$rel : isExternal ? "noopener noreferrer" : undefined;
+  return props.disabled ? {
+    role: "link",
+    target: target,
+    tabIndex: -1,
+    "aria-disabled": true
+  } : {
+    target: target,
+    href: href,
+    rel: rel,
+    onClick: onClick,
+    role: props.role,
+    tabIndex: props.tabIndex
+  };
+};

package/dist/cjs/utils/useTriggerInputChange.d.ts

@@ -0,0 +1,8 @@
+import type { MutableRefObject } from "react";
+declare type InputValue = JSX.IntrinsicElements["input"]["value"];
+/**
+ * Trigger a native input change event.
+ * See https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js
+ */
+export declare const useTriggerInputChange: (inputRef: MutableRefObject<HTMLInputElement | null>) => (value: InputValue) => void;
+export {};

package/dist/cjs/utils/useTriggerInputChange.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTriggerInputChange = void 0;
+var _react = require("react");
+/**
+ * Trigger a native input change event.
+ * See https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js
+ */
+var useTriggerInputChange = exports.useTriggerInputChange = function useTriggerInputChange(inputRef) {
+  var triggerInputChange = (0, _react.useCallback)(function (value) {
+    var input = inputRef.current;
+    if (!input) return;
+
+    // @ts-ignore
+    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+    var ev2 = new Event("input", {
+      bubbles: true
+    });
+    nativeInputValueSetter.call(input, value);
+    input.dispatchEvent(ev2);
+  }, [inputRef]);
+  return triggerInputChange;
+};

package/dist/esm/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "react";
+export declare type AnnouncementBadgeSizes = "default" | "small";
+export declare type AnnouncementBadgeTexts = "new" | "beta" | "internal" | "pilot";
+export declare type AnnouncementBadgeLocale = {
+    [key in AnnouncementBadgeTexts]?: string;
+};
+export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** @default default */
+    size?: AnnouncementBadgeSizes;
+    /**
+     * Define which text to display in the `AnnouncementBadge`
+     * @default new
+     */
+    text?: AnnouncementBadgeTexts;
+    /** @default accent */
+    variant?: "accent" | "red";
+    locale?: AnnouncementBadgeLocale;
+    children?: never;
+}
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
+export declare const AnnouncementBadge: import("react").ForwardRefExoticComponent<AnnouncementBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/esm/AnnouncementBadge/AnnouncementBadge.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["size", "text", "variant", "className", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { forwardRef } from "react";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_LOCALE = {
+  beta: "beta",
+  internal: "internal",
+  "new": "new",
+  pilot: "pilot"
+};
+var DEFAULT_CLASSNAME = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["capitalize inline-block rounded-full text-white select-none"])));
+var SIZE_CLASSNAMES = {
+  "default": stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-body h-6 leading-md px-2"]))),
+  small: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption px-1"])))
+};
+
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
+export var AnnouncementBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "new" : _ref$text,
+    variantProp = _ref.variant,
+    className = _ref.className,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextLocale = useLocale("announcementBadge");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+  var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    className: cx(DEFAULT_CLASSNAME, variant === "red" ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-red-600"]))) : stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
+    children: locale[text]
+  }));
+});
+AnnouncementBadge.displayName = "AnnouncementBadge";

package/dist/esm/AnnouncementBadge/index.d.ts

@@ -0,0 +1 @@
+export * from "./AnnouncementBadge";

package/dist/esm/AnnouncementBadge/index.js

@@ -0,0 +1 @@
+export * from "./AnnouncementBadge";

package/dist/esm/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AutoCompleteProps, Option } from "./types";
+/**
+ * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
+ *
+ * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
+ */
+export declare const AutoComplete: import("react").ForwardRefExoticComponent<AutoCompleteProps<Option> & import("react").RefAttributes<HTMLInputElement>>;