@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

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.mjs

@@ -1,18 +1,12 @@
-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 +31,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 +54,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 +75,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 +159,61 @@ 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__*/ _jsxs(AutocompleteRoot, {
+        children: [
+            label && /*#__PURE__*/ _jsx(AutocompleteLabel, {
+                ...getInputLabelProps(),
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs(AutocompleteWrap, {
+                ...getRootProps(),
+                "data-focus": focused,
+                children: [
+                    /*#__PURE__*/ _jsxs(AutocompleteInner, {
+                        ref: setAnchorEl,
+                        children: [
+                            multiple && value.map((valueItem, index)=>{
+                                const { onDelete, key, ...tagProps } = getTagProps({
+                                    index
+                                });
+                                return /*#__PURE__*/ _jsxs(AutocompleteItem, {
+                                    ...tagProps,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(AutocompleteItemLabel, {
+                                            children: isString(valueItem) ? valueItem : valueItem.Label || valueItem.label
+                                        }),
+                                        /*#__PURE__*/ _jsx(AutocompleteItemRemove, {
+                                            onClick: onDelete,
+                                            children: "✕"
+                                        })
+                                    ]
+                                }, key);
+                            }),
+                            /*#__PURE__*/ _jsx(AutocompleteInput, {
+                                ...inputProps(),
+                                placeholder: placeholder
+                            })
+                        ]
+                    }),
+                    !!options.length && /*#__PURE__*/ _jsx(AutocompleteInputArrow, {
+                        ...getPopupIndicatorProps(),
+                        isOpen: popupOpen
+                    }),
+                    loading && /*#__PURE__*/ _jsx(InputProgress, {})
+                ]
+            }),
+            groupedOptions.length ? /*#__PURE__*/ _jsx(AutocompleteMenu, {
+                ...getListboxProps(),
+                children: groupedOptions.map((option, index)=>/*#__PURE__*/ _jsx(AutocompleteMenuItem, {
+                        ...getOptionProps({
+                            option,
+                            index
+                        }),
+                        children: isString(option) ? option : option.Label || option.label
+                    }, index))
+            }) : null,
+            children
+        ]
+    });
+// });
 };

package/Autocomplete/AutocompleteReach.mjs

@@ -1,112 +1,111 @@
 // TODO: remove, just use mui version...
-export var 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 type { 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>
-//     );
-//   }
-// );
+export const 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 type { 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>
+ //     );
+ //   }
+ // );

package/Autocomplete/components.d.ts

@@ -1,21 +1,17 @@
-/// <reference types="react" />
-export declare const AutocompleteRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItemRemove: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInputWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const AutocompleteRoot: any;
+export declare const AutocompleteLabel: any;
+export declare const AutocompleteWrap: any;
+export declare const AutocompleteInner: any;
+export declare const AutocompleteItem: any;
+export declare const AutocompleteItemLabel: any;
+export declare const AutocompleteItemRemove: any;
+export declare const AutocompleteInputWrap: any;
+export declare const AutocompleteInput: any;
 /**
  * This cannot be a button otherwise on `Enter` the form would submit instead
  * of opening the dropdown or adding the selection. There are too many events
  * to prevent if we were using a standard HTML `<button>`
  */
-export declare const AutocompleteInputArrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Select/components").SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteMenu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    $active?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, never>;
+export declare const AutocompleteInputArrow: any;
+export declare const AutocompleteMenu: any;
+export declare const AutocompleteMenuItem: any;