@etsoo/materialui 1.1.49 → 1.1.51

package/lib/TagList.d.ts

@@ -1,10 +1,19 @@
 /// <reference types="react" />
 import { AutocompleteProps } from "@mui/material";
+import { InputFieldProps } from "./InputField";
 export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "open" | "multiple" | "freeSolo" | "options" | "renderInput"> & {
+    /**
+     * Label
+     */
+    label?: string;
     /**
      * Load data callback
      */
     loadData: (keyword: string | undefined, maxItems: number) => PromiseLike<string[] | null | undefined>;
+    /**
+     * Input props
+     */
+    inputProps?: Omit<InputFieldProps, "onChange">;
     /**
      * Max items
      */

package/lib/TagList.js

@@ -12,22 +12,31 @@ export function TagList(props) {
     // Destruct
     const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
         React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
-        option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, ...rest } = props;
+        option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [options, setOptions] = React.useState([]);
     const loading = open && options.length === 0;
-    return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, open: open, onOpen: () => {
+    const loadDataLocal = async (keyword) => {
+        var _a;
+        const result = (_a = (await loadData(keyword, maxItems))) !== null && _a !== void 0 ? _a : [];
+        if (result.length >= maxItems) {
+            result.push(moreLabel);
+        }
+        setOptions(result);
+    };
+    return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);
+            if (options.length === 0) {
+                loadDataLocal();
+            }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { changeDelay: 480, onChange: async (event) => {
-                var _a;
-                const result = (_a = (await loadData(event.target.value, maxItems))) !== null && _a !== void 0 ? _a : [];
-                if (result.length >= maxItems) {
-                    result.push(moreLabel);
-                }
-                setOptions(result);
-            }, ...params })), getOptionDisabled: (item) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+                // Stop bubble
+                event.preventDefault();
+                event.stopPropagation();
+                await loadDataLocal(event.target.value);
+            }, ...inputProps, ...params })), getOptionDisabled: (item) => {
             return item === moreLabel;
         }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, ...rest }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.49",
+  "version": "1.1.51",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/TagList.tsx

@@ -2,13 +2,18 @@ import { Autocomplete, AutocompleteProps, Checkbox, Chip } from "@mui/material";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
-import { InputField } from "./InputField";
+import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
 
 export type TagListProps = Omit<
   AutocompleteProps<string, true, false, true>,
   "open" | "multiple" | "freeSolo" | "options" | "renderInput"
 > & {
+  /**
+   * Label
+   */
+  label?: string;
+
   /**
    * Load data callback
    */
@@ -17,6 +22,11 @@ export type TagListProps = Omit<
     maxItems: number
   ) => PromiseLike<string[] | null | undefined>;
 
+  /**
+   * Input props
+   */
+  inputProps?: Omit<InputFieldProps, "onChange">;
+
   /**
    * Max items
    */
@@ -56,6 +66,10 @@ export function TagList(props: TagListProps) {
     openText = openDefault,
     loadData,
     maxItems = 16,
+    disableCloseOnSelect = true,
+    openOnFocus = true,
+    label,
+    inputProps,
     ...rest
   } = props;
 
@@ -63,31 +77,47 @@ export function TagList(props: TagListProps) {
   const [options, setOptions] = React.useState<readonly string[]>([]);
   const loading = open && options.length === 0;
 
+  const loadDataLocal = async (keyword?: string) => {
+    const result = (await loadData(keyword, maxItems)) ?? [];
+    if (result.length >= maxItems) {
+      result.push(moreLabel);
+    }
+    setOptions(result);
+  };
+
   return (
     <Autocomplete<string, true, false, true>
       multiple
       freeSolo
+      filterOptions={(options, _state) => options}
       open={open}
       onOpen={() => {
         setOpen(true);
+        if (options.length === 0) {
+          loadDataLocal();
+        }
       }}
       onClose={() => {
         setOpen(false);
       }}
       options={options}
       loading={loading}
+      disableCloseOnSelect={disableCloseOnSelect}
+      openOnFocus={openOnFocus}
       renderOption={renderOption}
       renderTags={renderTags}
       renderInput={(params) => (
         <InputField
+          label={label}
           changeDelay={480}
           onChange={async (event) => {
-            const result = (await loadData(event.target.value, maxItems)) ?? [];
-            if (result.length >= maxItems) {
-              result.push(moreLabel);
-            }
-            setOptions(result);
+            // Stop bubble
+            event.preventDefault();
+            event.stopPropagation();
+
+            await loadDataLocal(event.target.value);
           }}
+          {...inputProps}
           {...params}
         />
       )}