@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Autocomplete/AutocompleteMui.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import type { Option } from "../types";
 import { FormControl } from "../Forms/helpers";
+import type { Option } from "../types";
 export type AutocompleteOption = Option | string;
 export type AutocompleteValue<TMultiple extends boolean | undefined = undefined> = TMultiple extends undefined ? null | Option[] | string[] | Option | string : TMultiple extends true ? Option[] | string[] : null | Option | string;
 export type AutocompleteConfig<TOption extends AutocompleteOption, TValue extends AutocompleteValue> = {

package/Autocomplete/AutocompleteMui.js

@@ -1,71 +1,30 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var useAutocomplete_1 = tslib_1.__importDefault(require("@mui/base/useAutocomplete"));
-var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
-var helpers_1 = require("../Forms/helpers");
-var helpers_2 = require("./helpers");
-var components_1 = require("./components");
-var styles_1 = require("../Forms/styles");
-/**
- * Autocomplete/autocomplete component based on [`@mui useAutocomplete hook`](https://mui.com/components/autocomplete/#useautocomplete/useAutocomplete).
- *
- * This component is design to work out of the box with [`react-hook-form`](https://react-hook-form.com/)
- * and [`yup`](https://github.com/jquense/yup) alongside our custom `Field`
- * component.
- *
- * After a lot of tests and attempts with `downshift` and `@reach` this proved
- * the best headless hook, small in size and behaving correctly in all scenarios.
- * `downshift` had in fact problems treating the initial `defaultValue` which
- * here is elegantly managed by the `isOptionEqualToValue` option passed into
- * the `useAutocomplete` hoo/useAutocompletek.
- *
- *
- * Validation with `yup` and `react-hook-form` example:
- *
- * ```ts
- * const schema = object({
- *   // the value must be an array with at least one non-empty string
- *   test1: array(string().required()).required().min(1),
- *   // the value must be an array of strings or an empty array
- *   test2: array(string().required()).required(),
- * }).required();
- * ```
- */
-// export const Autocomplete = <TOption, TValue>forwardRef<
-//  HTMLInputElement,
-//  PropsWithChildren<AutocompleteProps<TOption, TValue>
-// >(function Autocomplete(
-//  {
-//    creatable,
-//    multiple,
-//    autoComplete,
-//    loadOptions,
-//    options: defaultOptions = [],
-//    defaultValue = [],
-//    label,
-//    register,
-//    setValue,
-//    // trigger,
-//    name,
-//    onChange,
-//    $ref,
-//    children,
-//    ...props
-//  },
-//  ref
-// ) {
-var Autocomplete = function (_a) {
-    var creatable = _a.creatable, multiple = _a.multiple, autoComplete = _a.autoComplete, loadOptions = _a.loadOptions, _b = _a.options, defaultOptions = _b === void 0 ? [] : _b, defaultValue = _a.defaultValue, controlledValue = _a.value, defaultInputValue = _a.defaultInputValue, label = _a.label, placeholder = _a.placeholder, register = _a.register, setValue = _a.setValue, 
-    // trigger,
-    name = _a.name, onChange = _a.onChange, $ref = _a.$ref, children = _a.children, props = tslib_1.__rest(_a, ["creatable", "multiple", "autoComplete", "loadOptions", "options", "defaultValue", "value", "defaultInputValue", "label", "placeholder", "register", "setValue", "name", "onChange", "$ref", "children"]);
-    var defaultOptionsMemo = (0, react_1.useMemo)(function () { return (0, helpers_1.normaliseOptions)(defaultOptions); }, [defaultOptions]);
-    var _c = (0, react_1.useState)(defaultOptionsMemo), options = _c[0], setOptions = _c[1];
-    var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
-    var _e = (0, useAutocomplete_1.default)({
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Autocomplete", {
+    enumerable: true,
+    get: function() {
+        return Autocomplete;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _useAutocomplete = /*#__PURE__*/ _interop_require_default._(require("@mui/base/useAutocomplete"));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _isString = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isString"));
+const _helpers = require("../Forms/helpers");
+const _styles = require("../Forms/styles");
+const _components = require("./components");
+const _helpers1 = require("./helpers");
+const Autocomplete = ({ creatable, multiple, autoComplete, loadOptions, options: defaultOptions = [], defaultValue, value: controlledValue, defaultInputValue, label, placeholder, register, setValue, // trigger,
+name, onChange, $ref, children, ...props })=>{
+    const defaultOptionsMemo = (0, _react.useMemo)(()=>(0, _helpers.normaliseOptions)(defaultOptions), [
+        defaultOptions
+    ]);
+    const [options, setOptions] = (0, _react.useState)(defaultOptionsMemo);
+    const [loading, setLoading] = (0, _react.useState)(false);
+    const { getRootProps, getInputLabelProps, getInputProps, getTagProps, getListboxProps, getOptionProps, getPopupIndicatorProps, groupedOptions, value: stateValue, setAnchorEl, popupOpen, focused } = (0, _useAutocomplete.default)({
         id: "Autocomplete",
         multiple: multiple ? true : undefined,
         freeSolo: creatable ? true : undefined,
@@ -79,86 +38,81 @@ var Autocomplete = function (_a) {
         // ourselves
         // inputValue: defaultInputValue,
         // @ts-expect-error FIXME: how?
-        defaultValue: defaultValue,
+        defaultValue,
         // @ts-expect-error FIXME: how?
         value: controlledValue,
         // defaultValue: useMemo(
         //   () => normaliseAutocompleteValue(defaultValue, multiple),
         //   [defaultValue]
         // ),
-        options: (0, react_1.useMemo)(function () { return (loadOptions ? options : defaultOptions); }, [loadOptions, options, defaultOptions]),
+        options: (0, _react.useMemo)(()=>loadOptions ? options : defaultOptions, [
+            loadOptions,
+            options,
+            defaultOptions
+        ]),
         // update input change only if we are searching as you type, @see
         // https://mui.com/components/autocomplete/#search-as-you-type
-        onInputChange: (0, react_1.useCallback)(function (_event, inputValue) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-            var newOptions, e_1;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!loadOptions) {
-                            return [2 /*return*/];
-                        }
-                        if (!inputValue) return [3 /*break*/, 6];
-                        setLoading(true);
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, 4, 5]);
-                        return [4 /*yield*/, loadOptions(inputValue)];
-                    case 2:
-                        newOptions = _a.sent();
-                        setOptions(newOptions);
-                        return [3 /*break*/, 5];
-                    case 3:
-                        e_1 = _a.sent();
-                        console.warn(e_1);
-                        return [3 /*break*/, 5];
-                    case 4:
-                        setLoading(false);
-                        return [7 /*endfinally*/];
-                    case 5: return [3 /*break*/, 7];
-                    case 6:
-                        setOptions(options);
-                        _a.label = 7;
-                    case 7: return [2 /*return*/];
+        onInputChange: (0, _react.useCallback)(async (_event, inputValue)=>{
+            if (!loadOptions) {
+                return;
+            }
+            if (inputValue) {
+                setLoading(true);
+                try {
+                    const newOptions = await loadOptions(inputValue);
+                    setOptions(newOptions);
+                } catch (e) {
+                    console.warn(e);
+                } finally{
+                    setLoading(false);
                 }
-            });
-        }); }, [loadOptions, options]),
+            } else {
+                setOptions(options);
+            // TODO: clear like behaviour?
+            // triggerChange({ value: "", label: "" });
+            }
+        }, [
+            loadOptions,
+            options
+        ]),
         // TODO: check if we need this, probably, and check how to structure the
         // callback, here we get the actual input event
-        onChange: function (event, newValue) {
-            var value = (0, helpers_2.normaliseAutocompleteValue)(newValue, multiple);
+        onChange: (event, newValue)=>{
+            const value = (0, _helpers1.normaliseAutocompleteValue)(newValue, multiple);
             // @ts-expect-error FIXME: how?
-            if (onChange)
-                onChange(newValue);
-            if (setValue)
-                setValue(name, value, { shouldValidate: true });
-            // triggerOnChange(onChange, name, value);
+            if (onChange) onChange(newValue);
+            if (setValue) setValue(name, value, {
+                shouldValidate: true
+            });
+        // triggerOnChange(onChange, name, value);
         },
         // support both freeSolo free text and full option structure
-        isOptionEqualToValue: function (option, value) {
-            var optValue = (0, isString_1.default)(option) ? option : option.value;
-            var valValue = (0, isString_1.default)(value) ? value : value.value;
+        isOptionEqualToValue: (option, value)=>{
+            const optValue = (0, _isString.default)(option) ? option : option.value;
+            const valValue = (0, _isString.default)(value) ? value : value.value;
             return optValue === valValue;
         },
-        getOptionLabel: function (option) {
+        getOptionLabel: (option)=>{
             // @ts-expect-error TODO: I don't get this error
-            return (0, isString_1.default)(option) ? option : option.label || "";
-        },
-    }), getRootProps = _e.getRootProps, getInputLabelProps = _e.getInputLabelProps, getInputProps = _e.getInputProps, getTagProps = _e.getTagProps, getListboxProps = _e.getListboxProps, getOptionProps = _e.getOptionProps, getPopupIndicatorProps = _e.getPopupIndicatorProps, groupedOptions = _e.groupedOptions, stateValue = _e.value, setAnchorEl = _e.setAnchorEl, popupOpen = _e.popupOpen, focused = _e.focused;
-    var value = typeof controlledValue !== "undefined" ? controlledValue : stateValue;
-    var inputProps = function () {
-        var autocompleteProps = getInputProps();
+            return (0, _isString.default)(option) ? option : option.label || "";
+        }
+    });
+    const value = typeof controlledValue !== "undefined" ? controlledValue : stateValue;
+    const inputProps = ()=>{
+        const autocompleteProps = getInputProps();
         // here we merge the mui's `useAutocomplete` props with the react-hook-form's
         // `register` props
-        var registerProps = register
-            ? register(name, {
-                // @ts-expect-error FIXME: can't remember
-                ref: autocompleteProps.ref.current,
-                // this makes the validation works when a valid `defaultValue`
-                // is provided
-                value: (0, helpers_2.normaliseAutocompleteValue)(value, multiple),
-            })
-            : {};
-        return tslib_1.__assign(tslib_1.__assign({}, registerProps), autocompleteProps);
+        const registerProps = register ? register(name, {
+            // @ts-expect-error FIXME: can't remember
+            ref: autocompleteProps.ref.current,
+            // this makes the validation works when a valid `defaultValue`
+            // is provided
+            value: (0, _helpers1.normaliseAutocompleteValue)(value, multiple)
+        }) : {};
+        return {
+            ...registerProps,
+            ...autocompleteProps
+        };
     };
     // to focus the input on error this works too
     // @see https://react-hook-form.com/faqs#question12 but probably it is
@@ -168,13 +122,33 @@ var Autocomplete = function (_a) {
     //     inputProps.ref.current.focus();
     //   }
     // }, [errors, name, inputProps.ref]);
-    return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteRoot, { children: [label && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteLabel, tslib_1.__assign({}, getInputLabelProps(), { children: label }))), (0, jsx_runtime_1.jsxs)(components_1.AutocompleteWrap, tslib_1.__assign({}, getRootProps(), { "data-focus": focused, children: [(0, jsx_runtime_1.jsxs)(components_1.AutocompleteInner, { ref: setAnchorEl, children: [multiple &&
-                                value.map(function (valueItem, index) {
-                                    var _a = getTagProps({ index: index }), onDelete = _a.onDelete, key = _a.key, tagProps = tslib_1.__rest(_a, ["onDelete", "key"]);
-                                    return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteItem, tslib_1.__assign({}, tagProps, { children: [(0, jsx_runtime_1.jsx)(components_1.AutocompleteItemLabel, { children: (0, isString_1.default)(valueItem)
-                                                    ? valueItem
-                                                    : valueItem.Label || valueItem.label }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteItemRemove, { onClick: onDelete, children: "\u2715" })] }), key));
-                                }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteInput, tslib_1.__assign({}, inputProps(), { placeholder: placeholder }))] }), !!options.length && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteInputArrow, tslib_1.__assign({}, getPopupIndicatorProps(), { isOpen: popupOpen }))), loading && (0, jsx_runtime_1.jsx)(styles_1.InputProgress, {})] })), groupedOptions.length ? ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenu, tslib_1.__assign({}, getListboxProps(), { children: groupedOptions.map(function (option, index) { return ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenuItem, tslib_1.__assign({}, getOptionProps({ option: option, index: index }), { children: (0, isString_1.default)(option) ? option : option.Label || option.label }), index)); }) }))) : null, children] }));
-    // });
+    return /*#__PURE__*/ _react.default.createElement(_components.AutocompleteRoot, null, label && /*#__PURE__*/ _react.default.createElement(_components.AutocompleteLabel, getInputLabelProps(), label), /*#__PURE__*/ _react.default.createElement(_components.AutocompleteWrap, {
+        ...getRootProps(),
+        "data-focus": focused
+    }, /*#__PURE__*/ _react.default.createElement(_components.AutocompleteInner, {
+        ref: setAnchorEl
+    }, multiple && value.map((valueItem, index)=>{
+        const { onDelete, key, ...tagProps } = getTagProps({
+            index
+        });
+        return /*#__PURE__*/ _react.default.createElement(_components.AutocompleteItem, {
+            key: key,
+            ...tagProps
+        }, /*#__PURE__*/ _react.default.createElement(_components.AutocompleteItemLabel, null, (0, _isString.default)(valueItem) ? valueItem : valueItem.Label || valueItem.label), /*#__PURE__*/ _react.default.createElement(_components.AutocompleteItemRemove, {
+            onClick: onDelete
+        }, "✕"));
+    }), /*#__PURE__*/ _react.default.createElement(_components.AutocompleteInput, {
+        ...inputProps(),
+        placeholder: placeholder
+    })), !!options.length && /*#__PURE__*/ _react.default.createElement(_components.AutocompleteInputArrow, {
+        ...getPopupIndicatorProps(),
+        isOpen: popupOpen
+    }), loading && /*#__PURE__*/ _react.default.createElement(_styles.InputProgress, null)), groupedOptions.length ? /*#__PURE__*/ _react.default.createElement(_components.AutocompleteMenu, getListboxProps(), groupedOptions.map((option, index)=>/*#__PURE__*/ _react.default.createElement(_components.AutocompleteMenuItem, {
+            key: index,
+            ...getOptionProps({
+                option,
+                index
+            })
+        }, (0, _isString.default)(option) ? option : option.Label || option.label))) : null, children);
+// });
 };
-exports.Autocomplete = Autocomplete;

package/Autocomplete/AutocompleteMui.mjs

@@ -1,18 +1,11 @@
-import { __assign, __awaiter, __generator, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 
-// forwardRef,
-useCallback, useMemo, useState, } from "react";
 import useAutocomplete from "@mui/base/useAutocomplete";
+import React, { useCallback, useMemo, useState } from "react";
+// forwardRef,
 import isString from "@koine/utils/isString";
-import { 
-// triggerOnChange,
-normaliseOptions, } from "../Forms/helpers";
-import { normaliseAutocompleteValue } from "./helpers";
-import { AutocompleteRoot, AutocompleteLabel, AutocompleteWrap, AutocompleteInner, AutocompleteItem, AutocompleteItemLabel, AutocompleteItemRemove, 
-// AutocompleteInputWrap,
-AutocompleteInput, AutocompleteInputArrow, AutocompleteMenu, AutocompleteMenuItem, } from "./components";
+import { normaliseOptions } from "../Forms/helpers";
 import { InputProgress } from "../Forms/styles";
+import { AutocompleteInner, AutocompleteInput, AutocompleteInputArrow, AutocompleteItem, AutocompleteItemLabel, AutocompleteItemRemove, AutocompleteLabel, AutocompleteMenu, AutocompleteMenuItem, AutocompleteRoot, AutocompleteWrap } from "./components";
+import { normaliseAutocompleteValue } from "./helpers";
 /**
  * Autocomplete/autocomplete component based on [`@mui useAutocomplete hook`](https://mui.com/components/autocomplete/#useautocomplete/useAutocomplete).
  *
@@ -37,8 +30,7 @@ import { InputProgress } from "../Forms/styles";
  *   test2: array(string().required()).required(),
  * }).required();
  * ```
- */
-// export const Autocomplete = <TOption, TValue>forwardRef<
+ */ // export const Autocomplete = <TOption, TValue>forwardRef<
 //  HTMLInputElement,
 //  PropsWithChildren<AutocompleteProps<TOption, TValue>
 // >(function Autocomplete(
@@ -61,14 +53,14 @@ import { InputProgress } from "../Forms/styles";
 //  },
 //  ref
 // ) {
-export var Autocomplete = function (_a) {
-    var creatable = _a.creatable, multiple = _a.multiple, autoComplete = _a.autoComplete, loadOptions = _a.loadOptions, _b = _a.options, defaultOptions = _b === void 0 ? [] : _b, defaultValue = _a.defaultValue, controlledValue = _a.value, defaultInputValue = _a.defaultInputValue, label = _a.label, placeholder = _a.placeholder, register = _a.register, setValue = _a.setValue, 
-    // trigger,
-    name = _a.name, onChange = _a.onChange, $ref = _a.$ref, children = _a.children, props = __rest(_a, ["creatable", "multiple", "autoComplete", "loadOptions", "options", "defaultValue", "value", "defaultInputValue", "label", "placeholder", "register", "setValue", "name", "onChange", "$ref", "children"]);
-    var defaultOptionsMemo = useMemo(function () { return normaliseOptions(defaultOptions); }, [defaultOptions]);
-    var _c = useState(defaultOptionsMemo), options = _c[0], setOptions = _c[1];
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    var _e = useAutocomplete({
+export const Autocomplete = ({ creatable, multiple, autoComplete, loadOptions, options: defaultOptions = [], defaultValue, value: controlledValue, defaultInputValue, label, placeholder, register, setValue, // trigger,
+name, onChange, $ref, children, ...props })=>{
+    const defaultOptionsMemo = useMemo(()=>normaliseOptions(defaultOptions), [
+        defaultOptions
+    ]);
+    const [options, setOptions] = useState(defaultOptionsMemo);
+    const [loading, setLoading] = useState(false);
+    const { getRootProps, getInputLabelProps, getInputProps, getTagProps, getListboxProps, getOptionProps, getPopupIndicatorProps, groupedOptions, value: stateValue, setAnchorEl, popupOpen, focused } = useAutocomplete({
         id: "Autocomplete",
         multiple: multiple ? true : undefined,
         freeSolo: creatable ? true : undefined,
@@ -82,86 +74,81 @@ export var Autocomplete = function (_a) {
         // ourselves
         // inputValue: defaultInputValue,
         // @ts-expect-error FIXME: how?
-        defaultValue: defaultValue,
+        defaultValue,
         // @ts-expect-error FIXME: how?
         value: controlledValue,
         // defaultValue: useMemo(
         //   () => normaliseAutocompleteValue(defaultValue, multiple),
         //   [defaultValue]
         // ),
-        options: useMemo(function () { return (loadOptions ? options : defaultOptions); }, [loadOptions, options, defaultOptions]),
+        options: useMemo(()=>loadOptions ? options : defaultOptions, [
+            loadOptions,
+            options,
+            defaultOptions
+        ]),
         // update input change only if we are searching as you type, @see
         // https://mui.com/components/autocomplete/#search-as-you-type
-        onInputChange: useCallback(function (_event, inputValue) { return __awaiter(void 0, void 0, void 0, function () {
-            var newOptions, e_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!loadOptions) {
-                            return [2 /*return*/];
-                        }
-                        if (!inputValue) return [3 /*break*/, 6];
-                        setLoading(true);
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, 4, 5]);
-                        return [4 /*yield*/, loadOptions(inputValue)];
-                    case 2:
-                        newOptions = _a.sent();
-                        setOptions(newOptions);
-                        return [3 /*break*/, 5];
-                    case 3:
-                        e_1 = _a.sent();
-                        console.warn(e_1);
-                        return [3 /*break*/, 5];
-                    case 4:
-                        setLoading(false);
-                        return [7 /*endfinally*/];
-                    case 5: return [3 /*break*/, 7];
-                    case 6:
-                        setOptions(options);
-                        _a.label = 7;
-                    case 7: return [2 /*return*/];
+        onInputChange: useCallback(async (_event, inputValue)=>{
+            if (!loadOptions) {
+                return;
+            }
+            if (inputValue) {
+                setLoading(true);
+                try {
+                    const newOptions = await loadOptions(inputValue);
+                    setOptions(newOptions);
+                } catch (e) {
+                    console.warn(e);
+                } finally{
+                    setLoading(false);
                 }
-            });
-        }); }, [loadOptions, options]),
+            } else {
+                setOptions(options);
+            // TODO: clear like behaviour?
+            // triggerChange({ value: "", label: "" });
+            }
+        }, [
+            loadOptions,
+            options
+        ]),
         // TODO: check if we need this, probably, and check how to structure the
         // callback, here we get the actual input event
-        onChange: function (event, newValue) {
-            var value = normaliseAutocompleteValue(newValue, multiple);
+        onChange: (event, newValue)=>{
+            const value = normaliseAutocompleteValue(newValue, multiple);
             // @ts-expect-error FIXME: how?
-            if (onChange)
-                onChange(newValue);
-            if (setValue)
-                setValue(name, value, { shouldValidate: true });
-            // triggerOnChange(onChange, name, value);
+            if (onChange) onChange(newValue);
+            if (setValue) setValue(name, value, {
+                shouldValidate: true
+            });
+        // triggerOnChange(onChange, name, value);
         },
         // support both freeSolo free text and full option structure
-        isOptionEqualToValue: function (option, value) {
-            var optValue = isString(option) ? option : option.value;
-            var valValue = isString(value) ? value : value.value;
+        isOptionEqualToValue: (option, value)=>{
+            const optValue = isString(option) ? option : option.value;
+            const valValue = isString(value) ? value : value.value;
             return optValue === valValue;
         },
-        getOptionLabel: function (option) {
+        getOptionLabel: (option)=>{
             // @ts-expect-error TODO: I don't get this error
             return isString(option) ? option : option.label || "";
-        },
-    }), getRootProps = _e.getRootProps, getInputLabelProps = _e.getInputLabelProps, getInputProps = _e.getInputProps, getTagProps = _e.getTagProps, getListboxProps = _e.getListboxProps, getOptionProps = _e.getOptionProps, getPopupIndicatorProps = _e.getPopupIndicatorProps, groupedOptions = _e.groupedOptions, stateValue = _e.value, setAnchorEl = _e.setAnchorEl, popupOpen = _e.popupOpen, focused = _e.focused;
-    var value = typeof controlledValue !== "undefined" ? controlledValue : stateValue;
-    var inputProps = function () {
-        var autocompleteProps = getInputProps();
+        }
+    });
+    const value = typeof controlledValue !== "undefined" ? controlledValue : stateValue;
+    const inputProps = ()=>{
+        const autocompleteProps = getInputProps();
         // here we merge the mui's `useAutocomplete` props with the react-hook-form's
         // `register` props
-        var registerProps = register
-            ? register(name, {
-                // @ts-expect-error FIXME: can't remember
-                ref: autocompleteProps.ref.current,
-                // this makes the validation works when a valid `defaultValue`
-                // is provided
-                value: normaliseAutocompleteValue(value, multiple),
-            })
-            : {};
-        return __assign(__assign({}, registerProps), autocompleteProps);
+        const registerProps = register ? register(name, {
+            // @ts-expect-error FIXME: can't remember
+            ref: autocompleteProps.ref.current,
+            // this makes the validation works when a valid `defaultValue`
+            // is provided
+            value: normaliseAutocompleteValue(value, multiple)
+        }) : {};
+        return {
+            ...registerProps,
+            ...autocompleteProps
+        };
     };
     // to focus the input on error this works too
     // @see https://react-hook-form.com/faqs#question12 but probably it is
@@ -171,12 +158,33 @@ export var Autocomplete = function (_a) {
     //     inputProps.ref.current.focus();
     //   }
     // }, [errors, name, inputProps.ref]);
-    return (_jsxs(AutocompleteRoot, { children: [label && (_jsx(AutocompleteLabel, __assign({}, getInputLabelProps(), { children: label }))), _jsxs(AutocompleteWrap, __assign({}, getRootProps(), { "data-focus": focused, children: [_jsxs(AutocompleteInner, { ref: setAnchorEl, children: [multiple &&
-                                value.map(function (valueItem, index) {
-                                    var _a = getTagProps({ index: index }), onDelete = _a.onDelete, key = _a.key, tagProps = __rest(_a, ["onDelete", "key"]);
-                                    return (_jsxs(AutocompleteItem, __assign({}, tagProps, { children: [_jsx(AutocompleteItemLabel, { children: isString(valueItem)
-                                                    ? valueItem
-                                                    : valueItem.Label || valueItem.label }), _jsx(AutocompleteItemRemove, { onClick: onDelete, children: "\u2715" })] }), key));
-                                }), _jsx(AutocompleteInput, __assign({}, inputProps(), { placeholder: placeholder }))] }), !!options.length && (_jsx(AutocompleteInputArrow, __assign({}, getPopupIndicatorProps(), { isOpen: popupOpen }))), loading && _jsx(InputProgress, {})] })), groupedOptions.length ? (_jsx(AutocompleteMenu, __assign({}, getListboxProps(), { children: groupedOptions.map(function (option, index) { return (_jsx(AutocompleteMenuItem, __assign({}, getOptionProps({ option: option, index: index }), { children: isString(option) ? option : option.Label || option.label }), index)); }) }))) : null, children] }));
-    // });
+    return /*#__PURE__*/ React.createElement(AutocompleteRoot, null, label && /*#__PURE__*/ React.createElement(AutocompleteLabel, getInputLabelProps(), label), /*#__PURE__*/ React.createElement(AutocompleteWrap, {
+        ...getRootProps(),
+        "data-focus": focused
+    }, /*#__PURE__*/ React.createElement(AutocompleteInner, {
+        ref: setAnchorEl
+    }, multiple && value.map((valueItem, index)=>{
+        const { onDelete, key, ...tagProps } = getTagProps({
+            index
+        });
+        return /*#__PURE__*/ React.createElement(AutocompleteItem, {
+            key: key,
+            ...tagProps
+        }, /*#__PURE__*/ React.createElement(AutocompleteItemLabel, null, isString(valueItem) ? valueItem : valueItem.Label || valueItem.label), /*#__PURE__*/ React.createElement(AutocompleteItemRemove, {
+            onClick: onDelete
+        }, "✕"));
+    }), /*#__PURE__*/ React.createElement(AutocompleteInput, {
+        ...inputProps(),
+        placeholder: placeholder
+    })), !!options.length && /*#__PURE__*/ React.createElement(AutocompleteInputArrow, {
+        ...getPopupIndicatorProps(),
+        isOpen: popupOpen
+    }), loading && /*#__PURE__*/ React.createElement(InputProgress, null)), groupedOptions.length ? /*#__PURE__*/ React.createElement(AutocompleteMenu, getListboxProps(), groupedOptions.map((option, index)=>/*#__PURE__*/ React.createElement(AutocompleteMenuItem, {
+            key: index,
+            ...getOptionProps({
+                option,
+                index
+            })
+        }, isString(option) ? option : option.Label || option.label))) : null, children);
+// });
 };