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

package/Autocomplete/AutocompleteReach.js

@@ -1,115 +1,121 @@
-"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 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>
-//     );
-//   }
-// );
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Autocomplete", {
+    enumerable: true,
+    get: function() {
+        return Autocomplete;
+    }
+});
+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/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;