@koine/react 1.0.13 → 1.0.16

package/node/Autocomplete/AutocompleteDownshiftMultiselect.js

@@ -0,0 +1,356 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+// TODO: remove, just use mui version...
+exports.Autocomplete = null;
+// import {
+//   forwardRef,
+//   useCallback,
+//   useEffect,
+//   useRef,
+//   useState,
+//   ForwardedRef,
+//   ReactNode,
+//   ComponentPropsWithRef,
+//   CSSProperties,
+// } from "react";
+// import { SetRequired } from "@koine/utils";
+// import {
+//   useCombobox,
+//   useMultipleSelection,
+//   UseMultipleSelectionProps,
+//   UseMultipleSelectionStateChange,
+//   UseMultipleSelectionReturnValue,
+// } from "downshift";
+// import { usePopper } from "react-popper"; // imports from downshift demo
+// // import { useDeepCompareEffect } from "react-use"; // imports from downshift demo
+// import type { Option } from "../types";
+// import {
+//   normaliseOptions,
+//   defaultOptionsFilterFn,
+//   triggerOnChange,
+// } from "../Forms/helpers";
+// import {
+//   AutocompleteRoot,
+//   AutocompleteLabel,
+//   AutocompleteWrap,
+//   AutocompleteInner,
+//   AutocompleteItem,
+//   AutocompleteItemLabel,
+//   AutocompleteItemRemove,
+//   AutocompleteInputWrap,
+//   AutocompleteInput,
+//   AutocompleteInputArrow,
+//   AutocompleteMenu,
+//   AutocompleteMenuItem,
+// } from "./components";
+// const USE_POPPER = false;
+// export type AutocompleteItem = Option;
+// export type AutocompleteValue = AutocompleteItem[];
+// export type AutocompleteProps = SetRequired<
+//   Omit<ComponentPropsWithRef<"input">, "defaultValue" | "onSelect">,
+//   "onChange" | "name"
+// > & {
+//   selectedItems: UseMultipleSelectionReturnValue<AutocompleteItem>["selectedItems"];
+//   onSelectedItemsChange: UseMultipleSelectionProps<AutocompleteItem>["onSelectedItemsChange"];
+//   onCreateItem: (item?: AutocompleteItem) => any;
+//   creatable?: boolean;
+//   onSelect?: (value?: AutocompleteValue) => any;
+//   options?: AutocompleteItem[];
+//   loadOptions?: (query?: string) => Promise<AutocompleteItem[]>;
+//   label?: string | ReactNode;
+//   defaultValue?: AutocompleteValue | string[];
+//   className?: string;
+//   style?: CSSProperties;
+//   $ref?: ForwardedRef<HTMLInputElement>;
+// };
+// /**
+//  * @see https://www.downshift-js.com/use-multiple-selection
+//  * @see https://codesandbox.io/s/y34o5l3p61?file=/src/hooks/useMultipleSelection/combobox.js
+//  * @see https://codesandbox.io/s/y34o5l3p61?file=/src/downshift/ordered-examples/05-multi-create.js
+//  */
+// export const _Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+//   function _Autocomplete(
+//     {
+//       selectedItems,
+//       onSelectedItemsChange,
+//       onCreateItem,
+//       creatable,
+//       onSelect,
+//       options = [],
+//       label,
+//       loadOptions,
+//       $ref,
+//       className,
+//       style,
+//       ...props
+//     },
+//     ref
+//   ) {
+//     options = normaliseOptions(options);
+//     const [isCreating, setIsCreating] = useState(false);
+//     const [filteredOptions, setFilteredOptions] = useState(options);
+//     const disclosureRef = useRef(null);
+//     const popoverRef = useRef(null);
+//     const { styles, attributes } = USE_POPPER
+//       ? usePopper(disclosureRef.current, popoverRef.current, {
+//           placement: "bottom-start",
+//         })
+//       : { styles: {}, attributes: {} };
+//     const {
+//       getSelectedItemProps,
+//       getDropdownProps,
+//       addSelectedItem,
+//       removeSelectedItem,
+//       // selectedItems,
+//       activeIndex,
+//     } = useMultipleSelection<AutocompleteItem>({
+//       selectedItems,
+//       onSelectedItemsChange,
+//       // onSelectedItemsChange: ({ selectedItems = [] }) => {
+//       //   triggerChange(selectedItems);
+//       // },
+//       // initialSelectedItems: normaliseOptions(defaultValue),
+//       stateReducer: (_, actionAndChanges) => {
+//         const { type, changes } = actionAndChanges;
+//         switch (type) {
+//           case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+//             return {
+//               ...changes,
+//               activeIndex: undefined,
+//             };
+//           default:
+//             return changes;
+//         }
+//       },
+//     });
+//     const selectedItemsValues = selectedItems.map((item) => item.value);
+//     const {
+//       isOpen,
+//       getToggleButtonProps,
+//       getLabelProps,
+//       getMenuProps,
+//       getInputProps,
+//       getComboboxProps,
+//       highlightedIndex,
+//       getItemProps,
+//       openMenu,
+//       selectItem,
+//       setHighlightedIndex,
+//       inputValue,
+//     } = useCombobox<null | AutocompleteItem>({
+//       selectedItem: null,
+//       items: filteredOptions,
+//       onInputValueChange: ({ inputValue }) => {
+//         // perhaps allows the optionsFilterFn as prop
+//         const filteredItems = defaultOptionsFilterFn(options, inputValue);
+//         if (creatable && isCreating && filteredItems.length > 0) {
+//           setIsCreating(false);
+//         }
+//         setFilteredOptions(filteredItems);
+//       },
+//       stateReducer: (state, actionAndChanges) => {
+//         const { changes, type } = actionAndChanges;
+//         switch (type) {
+//           case useCombobox.stateChangeTypes.InputBlur:
+//             return {
+//               ...changes,
+//               highlightedIndex: state.highlightedIndex,
+//               // clear input on blur to avoid have "pending" uncompleted behaviours
+//               inputValue: "",
+//             };
+//           case useCombobox.stateChangeTypes.InputKeyDownEnter:
+//           case useCombobox.stateChangeTypes.ItemClick:
+//             return {
+//               ...changes,
+//               highlightedIndex: state.highlightedIndex,
+//               isOpen: true,
+//               inputValue: "",
+//             };
+//           default:
+//             return changes;
+//         }
+//       },
+//       onStateChange: ({ type, selectedItem }) => {
+//         switch (type) {
+//           case useCombobox.stateChangeTypes.InputKeyDownEnter:
+//           case useCombobox.stateChangeTypes.ItemClick:
+//             if (selectedItem) {
+//               if (selectedItemsValues.includes(selectedItem.value)) {
+//                 removeSelectedItem(selectedItem);
+//               } else {
+//                 if (creatable && onCreateItem) {
+//                   onCreateItem(selectedItem);
+//                 }
+//                 addSelectedItem(selectedItem);
+//                 if (isCreating) {
+//                   setIsCreating(false);
+//                   setFilteredOptions(options);
+//                 }
+//               }
+//               selectItem(null);
+//             }
+//             break;
+//           default:
+//             break;
+//         }
+//       },
+//     });
+//     useEffect(() => {
+//       if (
+//         creatable &&
+//         filteredOptions.length === 0 &&
+//         activeIndex === -1 &&
+//         inputValue.length > 0
+//       ) {
+//         setIsCreating(true);
+//         setFilteredOptions(normaliseOptions([inputValue]));
+//         setHighlightedIndex(0);
+//       }
+//     }, [
+//       creatable,
+//       filteredOptions,
+//       setIsCreating,
+//       setHighlightedIndex,
+//       inputValue,
+//       activeIndex,
+//     ]);
+//     // useEffect(() => {
+//     //   setSelectedItems(normaliseOptions(defaultValue));
+//     // }, [defaultValue]);
+//     // useDeepCompareEffect(() => {
+//     //   setFilteredOptions(options);
+//     // }, [options]);
+//     // useDeepCompareEffect(() => {
+//     //   triggerChange(values);
+//     // }, [values]);
+//     return (
+//       <AutocompleteRoot>
+//         {label && (
+//           <AutocompleteLabel {...getLabelProps()}>{label}</AutocompleteLabel>
+//         )}
+//         <AutocompleteWrap
+//           {...getComboboxProps({
+//             ref: disclosureRef,
+//           })}
+//         >
+//           <AutocompleteInner>
+//             {selectedItems.map((selectedItem, index) => (
+//               <AutocompleteItem
+//                 key={`selected-item-${index}`}
+//                 {...getSelectedItemProps({ selectedItem, index })}
+//               >
+//                 <AutocompleteItemLabel>
+//                   {selectedItem?.label || selectedItem}
+//                 </AutocompleteItemLabel>
+//                 <AutocompleteItemRemove
+//                   onClick={(e) => {
+//                     e.stopPropagation();
+//                     removeSelectedItem(selectedItem);
+//                   }}
+//                 >
+//                   &#10005;
+//                 </AutocompleteItemRemove>
+//               </AutocompleteItem>
+//             ))}
+//             <AutocompleteInputWrap>
+//               <AutocompleteInput
+//                 {...getInputProps({
+//                   ...getDropdownProps({
+//                     // this option used in the official example prevents the
+//                     // backspace key to behave correctly
+//                     // preventKeyAction: isOpen,
+//                     onClick: isOpen ? () => {} : openMenu,
+//                     onFocus: isOpen ? () => {} : openMenu,
+//                     ref: $ref || ref,
+//                     // ref: disclosureRef,
+//                   }),
+//                   // ref: $ref || ref,
+//                 })}
+//                 {...props}
+//               />
+//             </AutocompleteInputWrap>
+//           </AutocompleteInner>
+//           {!!filteredOptions.length && (
+//             <AutocompleteInputArrow
+//               {...getToggleButtonProps()}
+//               aria-label={"toggle menu"}
+//               isOpen={isOpen}
+//             />
+//           )}
+//         </AutocompleteWrap>
+//         <AutocompleteMenu
+//           style={styles.popper}
+//           {...attributes.popper}
+//           {...getMenuProps({ ref: popoverRef })}
+//         >
+//           {isOpen &&
+//             filteredOptions.map((item, index) => (
+//               <AutocompleteMenuItem
+//                 $active={highlightedIndex === index}
+//                 key={`${item.value}${index}`}
+//                 {...getItemProps({ item, index })}
+//               >
+//                 {isCreating ? (
+//                   <>
+//                     <span>+</span> <strong>{item.label}</strong>
+//                   </>
+//                 ) : (
+//                   <>
+//                     {/* {selectedItemsValues.includes(item.value) && (
+//                       <CheckboxToggle />
+//                     )} */}
+//                     {item.label}
+//                   </>
+//                 )}
+//               </AutocompleteMenuItem>
+//             ))}
+//         </AutocompleteMenu>
+//       </AutocompleteRoot>
+//     );
+//   }
+// );
+// /**
+//  * @see https://www.downshift-js.com/use-multiple-selection
+//  * @see https://codesandbox.io/s/y34o5l3p61?file=/src/hooks/useMultipleSelection/combobox.js
+//  * @see https://codesandbox.io/s/y34o5l3p61?file=/src/downshift/ordered-examples/05-multi-create.js
+//  */
+// export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+//   function Autocomplete(
+//     { defaultValue = [], onChange, onSelect, name, ...props },
+//     ref
+//   ) {
+//     const [selectedItems, setSelectedItems] = useState(
+//       normaliseOptions(defaultValue)
+//     );
+//     const triggerChange = useCallback(
+//       (values: AutocompleteValue) => {
+//         triggerOnChange(
+//           onChange,
+//           name,
+//           values.map((item) => item.value || item)
+//         );
+//         if (onSelect) onSelect(values);
+//       },
+//       [onChange, onSelect, name]
+//     );
+//     const handleCreateItem = (item?: AutocompleteItem) => {
+//       // setSelectedItems((curr) => [...curr, item]);
+//     };
+//     const handleSelectedItemsChange = ({
+//       selectedItems = [],
+//     }: UseMultipleSelectionStateChange<AutocompleteItem>) => {
+//       setSelectedItems(selectedItems);
+//       triggerChange(selectedItems);
+//     };
+//     return (
+//       <_Autocomplete
+//         {...props}
+//         selectedItems={selectedItems}
+//         onSelectedItemsChange={handleSelectedItemsChange}
+//         onCreateItem={handleCreateItem}
+//         $ref={ref}
+//       />
+//     );
+//   }
+// );

package/node/Autocomplete/AutocompleteMui.js

@@ -0,0 +1,180 @@
+"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 AutocompleteUnstyled_1 = require("@mui/base/AutocompleteUnstyled");
+var utils_1 = require("@koine/utils");
+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).
+ *
+ * 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` hook.
+ *
+ *
+ * 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, AutocompleteUnstyled_1.useAutocomplete)({
+        id: "Autocomplete",
+        multiple: multiple ? true : undefined,
+        freeSolo: creatable ? true : undefined,
+        // autoComplete: autoComplete ? true : undefined,
+        disableCloseOnSelect: true,
+        openOnFocus: true,
+        blurOnSelect: autoComplete && !multiple,
+        selectOnFocus: creatable,
+        // TODO: passing the defaultInputValue makes the input controlled, which is
+        // not what I want, so we probably need to handle the input default value
+        // ourselves
+        // inputValue: defaultInputValue,
+        // @ts-expect-error FIXME: how?
+        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]),
+        // 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*/];
+                }
+            });
+        }); }, [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);
+            // @ts-expect-error FIXME: how?
+            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, utils_1.isString)(option) ? option : option.value;
+            var valValue = (0, utils_1.isString)(value) ? value : value.value;
+            return optValue === valValue;
+        },
+        getOptionLabel: function (option) {
+            // @ts-expect-error TODO: I don't get this error
+            return (0, utils_1.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();
+        // 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);
+    };
+    // to focus the input on error this works too
+    // @see https://react-hook-form.com/faqs#question12 but probably it is
+    // better to do as now passing the input ref to the register options
+    // useEffect(() => {
+    //   if (errors[name]) {
+    //     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, tslib_1.__assign({ 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, utils_1.isString)(valueItem)
+                                                    ? valueItem
+                                                    : valueItem.Label || valueItem.label }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteItemRemove, tslib_1.__assign({ 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, utils_1.isString)(option) ? option : option.Label || option.label }), index)); }) }))) : null, children] }));
+    // });
+};
+exports.Autocomplete = Autocomplete;

package/node/Autocomplete/AutocompleteReach.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+// TODO: remove, just use mui version...
+exports.Autocomplete = null;
+// import {
+//   forwardRef,
+//   useCallback,
+//   useState,
+//   ForwardedRef,
+//   ReactNode,
+//   ComponentPropsWithRef,
+//   CSSProperties,
+//   ChangeEventHandler,
+// } from "react";
+// import {
+//   Combobox,
+//   ComboboxInput,
+//   ComboboxPopover,
+//   ComboboxList,
+//   ComboboxOption,
+//   ComboboxOptionText,
+// } from "@reach/combobox";
+// import {
+//   AutocompleteRoot,
+//   AutocompleteInput,
+//   AutocompleteLabel,
+// } from "./components";
+// import type { Option } from "../types";
+// import { SetRequired } from "@koine/utils";
+// export type AutocompleteOption =
+//   | null
+//   | (Option & {
+//       key: string;
+//     });
+// export type AutocompleteProps = SetRequired<
+//   ComponentPropsWithRef<"input">,
+//   "onChange" | "name"
+// > & {
+//   onSelect?: (option?: AutocompleteOption) => any;
+//   options: AutocompleteOption[];
+//   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
+//   label?: string | ReactNode;
+//   className?: string;
+//   style?: CSSProperties;
+//   $ref: ForwardedRef<HTMLInputElement>;
+// };
+// export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+//   function Autocomplete(
+//     {
+//       options = [],
+//       label,
+//       name,
+//       value,
+//       onChange,
+//       loadOptions,
+//       $ref,
+//       className,
+//       style,
+//       ...props
+//     },
+//     ref
+//   ) {
+//     const [items, setItems] = useState(options);
+//     const [loading, setLoading] = useState(false);
+//     const handleInputValueChange: ChangeEventHandler<HTMLInputElement> =
+//       useCallback(
+//         async (event) => {
+//           const inputValue = event.target.value;
+//           if (loadOptions) {
+//             setLoading(true);
+//             try {
+//               const newOptions = await loadOptions(inputValue);
+//               setItems(newOptions);
+//             } catch (e) {}
+//             setLoading(false);
+//           }
+//         },
+//         [loadOptions]
+//       );
+//     return (
+//       <AutocompleteRoot>
+//         {label && <AutocompleteLabel>{label}</AutocompleteLabel>}
+//         <Combobox aria-label="choose a fruit" openOnFocus={true}>
+//           <AutocompleteInput
+//             forwardedAs={ComboboxInput}
+//             ref={$ref}
+//             onChange={handleInputValueChange}
+//             selectOnClick={true}
+//             autocomplete={false}
+//           />
+//           {(!!items.length || loading) && (
+//             <ComboboxPopover>
+//               <ComboboxList persistSelection>
+//                 {items
+//                   // .filter(item => !inputValue || item.includes(inputValue))
+//                   .map(
+//                     (item, index) =>
+//                       item && (
+//                         <ComboboxOption
+//                           key={`${item.value}${index}`}
+//                           value={item.label}
+//                         >
+//                           <ComboboxOptionText />
+//                         </ComboboxOption>
+//                       )
+//                   )}
+//               </ComboboxList>
+//             </ComboboxPopover>
+//           )}
+//         </Combobox>
+//       </AutocompleteRoot>
+//     );
+//   }
+// );