From 50cbd2ef286d04c377e8146dd731294ad7d69706 Mon Sep 17 00:00:00 2001
From: Zheng Song <szhsin9@gmail.com>
Date: Fri, 5 Jul 2024 22:23:00 +1000
Subject: [PATCH 1/3] Auto focus feature

---
 dist/cjs/index.js                           | 25 ++++++-
 dist/esm/features/atom/autoFocus.js         | 17 +++++
 dist/esm/features/atom/inline.js            |  4 +-
 dist/esm/features/molecule/supercomplete.js |  4 +-
 dist/esm/index.js                           |  1 +
 examples/features/autocompleteFocus.ts      | 19 +++++
 examples/pages/index.tsx                    | 83 +++++++++++----------
 examples/pages/multiSelectAction.tsx        |  5 +-
 src/common.ts                               |  2 +-
 src/features/atom/autoFocus.ts              | 19 +++++
 src/features/atom/inline.ts                 |  4 +-
 src/features/molecule/supercomplete.ts      |  6 +-
 src/index.ts                                |  1 +
 types/common.d.ts                           |  2 +-
 types/features/atom/autoFocus.d.ts          |  4 +
 types/features/atom/inline copy.d.ts        |  4 +
 types/features/atom/inline.d.ts             |  2 +-
 types/features/molecule/supercomplete.d.ts  |  2 +-
 types/index.d.ts                            |  1 +
 19 files changed, 149 insertions(+), 56 deletions(-)
 create mode 100644 dist/esm/features/atom/autoFocus.js
 create mode 100644 examples/features/autocompleteFocus.ts
 create mode 100644 src/features/atom/autoFocus.ts
 create mode 100644 types/features/atom/autoFocus.d.ts
 create mode 100644 types/features/atom/inline copy.d.ts

diff --git a/dist/cjs/index.js b/dist/cjs/index.js
index c5cb9f5..f1bffc6 100644
--- a/dist/cjs/index.js
+++ b/dist/cjs/index.js
@@ -286,6 +286,22 @@ const autocompleteLite = ({
   };
 };
 
+const autoFocus = ({
+  getFocusItem
+}) => ({
+  setFocusItem
+}) => ({
+  getInputProps: () => ({
+    onChange: async e => {
+      const nextValue = e.target.value;
+      if (nextValue) {
+        const item = await getFocusItem(nextValue);
+        item && setFocusItem(item);
+      }
+    }
+  })
+});
+
 const mergeObjects = (obj1, obj2) => {
   const merged = {
     ...obj1
@@ -445,7 +461,7 @@ const multiSelectDropdown = (props = {}) => mergeModules(autocompleteLite({
 }), dropdownToggle(props), multiInput());
 
 const inline = ({
-  getInlineItem
+  getFocusItem
 }) => ({
   getItemValue,
   setTmpValue,
@@ -460,7 +476,7 @@ const inline = ({
         return;
       }
       const nextValue = target.value;
-      const item = await getInlineItem(nextValue);
+      const item = await getFocusItem(nextValue);
       if (!item) return;
       setFocusItem(item);
       const itemValue = getItemValue(item);
@@ -473,13 +489,13 @@ const inline = ({
 });
 
 const supercomplete = ({
-  getInlineItem,
+  getFocusItem,
   ...rest
 }) => mergeModules(autocomplete({
   ...rest,
   rovingText: true
 }), inline({
-  getInlineItem
+  getFocusItem
 }));
 
 const linearTraversal = ({
@@ -537,6 +553,7 @@ const groupedTraversal = ({
   });
 };
 
+exports.autoFocus = autoFocus;
 exports.autocomplete = autocomplete;
 exports.autocompleteLite = autocompleteLite;
 exports.dropdown = dropdown;
diff --git a/dist/esm/features/atom/autoFocus.js b/dist/esm/features/atom/autoFocus.js
new file mode 100644
index 0000000..259f73c
--- /dev/null
+++ b/dist/esm/features/atom/autoFocus.js
@@ -0,0 +1,17 @@
+const autoFocus = ({
+  getFocusItem
+}) => ({
+  setFocusItem
+}) => ({
+  getInputProps: () => ({
+    onChange: async e => {
+      const nextValue = e.target.value;
+      if (nextValue) {
+        const item = await getFocusItem(nextValue);
+        item && setFocusItem(item);
+      }
+    }
+  })
+});
+
+export { autoFocus };
diff --git a/dist/esm/features/atom/inline.js b/dist/esm/features/atom/inline.js
index fd4e9c7..b79050f 100644
--- a/dist/esm/features/atom/inline.js
+++ b/dist/esm/features/atom/inline.js
@@ -1,5 +1,5 @@
 const inline = ({
-  getInlineItem
+  getFocusItem
 }) => ({
   getItemValue,
   setTmpValue,
@@ -14,7 +14,7 @@ const inline = ({
         return;
       }
       const nextValue = target.value;
-      const item = await getInlineItem(nextValue);
+      const item = await getFocusItem(nextValue);
       if (!item) return;
       setFocusItem(item);
       const itemValue = getItemValue(item);
diff --git a/dist/esm/features/molecule/supercomplete.js b/dist/esm/features/molecule/supercomplete.js
index cd99d6d..f9ba9eb 100644
--- a/dist/esm/features/molecule/supercomplete.js
+++ b/dist/esm/features/molecule/supercomplete.js
@@ -3,13 +3,13 @@ import { autocomplete } from './autocomplete.js';
 import { inline } from '../atom/inline.js';
 
 const supercomplete = ({
-  getInlineItem,
+  getFocusItem,
   ...rest
 }) => mergeModules(autocomplete({
   ...rest,
   rovingText: true
 }), inline({
-  getInlineItem
+  getFocusItem
 }));
 
 export { supercomplete };
diff --git a/dist/esm/index.js b/dist/esm/index.js
index 9a33d9a..b81e6cd 100644
--- a/dist/esm/index.js
+++ b/dist/esm/index.js
@@ -2,6 +2,7 @@ export { useCombobox } from './hooks/useCombobox.js';
 export { useMultiSelect } from './hooks/useMultiSelect.js';
 export { useAutoHeight } from './hooks/useAutoHeight.js';
 export { autocompleteLite } from './features/atom/autocompleteLite.js';
+export { autoFocus } from './features/atom/autoFocus.js';
 export { autocomplete } from './features/molecule/autocomplete.js';
 export { dropdown } from './features/molecule/dropdown.js';
 export { multiSelect } from './features/molecule/multiSelect.js';
diff --git a/examples/features/autocompleteFocus.ts b/examples/features/autocompleteFocus.ts
new file mode 100644
index 0000000..bf8cfb7
--- /dev/null
+++ b/examples/features/autocompleteFocus.ts
@@ -0,0 +1,19 @@
+import {
+  mergeModules,
+  MergedFeature,
+  FeatureProps,
+  AutocompleteFeature,
+  AutoFocusFeature,
+  autocomplete,
+  autoFocus
+} from '@szhsin/react-autocomplete';
+
+type AutocompleteFocusFeature<T> = MergedFeature<
+  T,
+  [AutocompleteFeature<T>, AutoFocusFeature<T>]
+>;
+
+const autocompleteFocus = <T>(props: FeatureProps<T>): AutocompleteFocusFeature<T> =>
+  mergeModules(autocomplete<T>(props), autoFocus<T>(props));
+
+export { autocompleteFocus };
diff --git a/examples/pages/index.tsx b/examples/pages/index.tsx
index 63d6c0e..6c8a45a 100644
--- a/examples/pages/index.tsx
+++ b/examples/pages/index.tsx
@@ -8,6 +8,7 @@ import {
 } from '@szhsin/react-autocomplete';
 import styles from '@/styles/Home.module.css';
 import { LIST_GROUP_PLAIN, KEYED_GROUP_PLAIN, LIST_GROUP, KEYED_GROUP } from '../data';
+import { autocompleteFocus } from '../features/autocompleteFocus';
 
 type Item = { name: string; abbr: string };
 const getItemValue = (item: Item) => item.name;
@@ -22,7 +23,7 @@ const getGroupedItems = (value: string) =>
   })).filter((group) => !!group.states.length);
 
 export default function Home() {
-  const [isSupercomplete, setSupercomplete] = useState(true);
+  const [selectedFeature, setSelectedFeature] = useState('supercomplete');
   const [select, setselect] = useState(false);
   const [rovingText, setRovingText] = useState(true);
   const [selectOnBlur, setSelectOnBlur] = useState(true);
@@ -40,6 +41,15 @@ export default function Home() {
   // const [items, setItems] = useState(US_STATES);
   // const feature = supercomplete<{ name: string; abbr: string }>();
 
+  const featureProps = {
+    select,
+    selectOnBlur,
+    deselectOnClear,
+    deselectOnChange,
+    closeOnSelect,
+    rovingText
+  };
+
   const groupedItems = getGroupedItems(value || '');
 
   const {
@@ -60,7 +70,7 @@ export default function Home() {
     isItemDisabled,
     value,
     onChange: (value) => {
-      // console.log('onChange', value);
+      console.log('onChange', value);
       setValue(value);
     },
     selected: selectedItem,
@@ -69,31 +79,28 @@ export default function Home() {
       setSelectedItem(item);
     },
 
-    feature: isSupercomplete
-      ? supercomplete({
-          select,
-          selectOnBlur,
-          deselectOnClear,
-          deselectOnChange,
-          closeOnSelect,
-          getInlineItem: (newValue) =>
-            getGroupedItems(newValue)[0]?.states.find((item) => !isItemDisabled(item))
-          // getInlineItem: (newValue) =>
-          //   new Promise((res) =>
-          //     setTimeout(
-          //       () => res(getGroupedItems(newValue)[0]?.states.find((item) => !isItemDisabled(item))),
-          //       1000
-          //     )
-          //   )
-        })
-      : autocomplete({
-          select,
-          selectOnBlur,
-          deselectOnClear,
-          deselectOnChange,
-          rovingText,
-          closeOnSelect
-        }),
+    feature:
+      selectedFeature === 'supercomplete'
+        ? supercomplete({
+            ...featureProps,
+            getFocusItem: (newValue) =>
+              getGroupedItems(newValue)[0]?.states.find((item) => !isItemDisabled(item))
+            // getInlineItem: (newValue) =>
+            //   new Promise((res) =>
+            //     setTimeout(
+            //       () => res(getGroupedItems(newValue)[0]?.states.find((item) => !isItemDisabled(item))),
+            //       1000
+            //     )
+            //   )
+          })
+        : selectedFeature === 'autocompleteFocus'
+        ? autocompleteFocus({
+            ...featureProps,
+            getFocusItem: (newValue) =>
+              getGroupedItems(newValue)[0]?.states.find((item) => !isItemDisabled(item))
+          })
+        : autocomplete(featureProps),
+
     traversal: groupedTraversal({
       traverseInput: true,
       groupedItems,
@@ -108,16 +115,16 @@ export default function Home() {
       <div>value: {value}</div>
       <div>Selected item: {selectedItem?.name}</div>
       <div>Focus item: {focusItem?.name}</div>
-      <div>
-        <label>
-          Supercomplete
-          <input
-            type="checkbox"
-            checked={isSupercomplete}
-            onChange={(e) => setSupercomplete(e.target.checked)}
-          />
-        </label>
-      </div>
+
+      <select
+        value={selectedFeature} // ...force the select's value to match the state variable...
+        onChange={(e) => setSelectedFeature(e.target.value)} // ... and update the state variable on any change!
+      >
+        <option value="supercomplete">supercomplete</option>
+        <option value="autocomplete">autocomplete</option>
+        <option value="autocompleteFocus">autocompleteFocus</option>
+      </select>
+
       <div>
         <label>
           select
@@ -128,7 +135,7 @@ export default function Home() {
           />
         </label>
       </div>
-      {!isSupercomplete && (
+      {selectedFeature !== 'supercomplete' && (
         <div>
           <label>
             rovingText
diff --git a/examples/pages/multiSelectAction.tsx b/examples/pages/multiSelectAction.tsx
index 202ef7a..8d4388c 100644
--- a/examples/pages/multiSelectAction.tsx
+++ b/examples/pages/multiSelectAction.tsx
@@ -28,7 +28,10 @@ export default function Home() {
   const [closeOnSelect, setCloseOnSelect] = useState(false);
 
   const [value, setValue] = useState<string | undefined>();
-  const [selectedItems, setSelectedItems] = useState<Item[]>([]);
+  const [selectedItems, setSelectedItems] = useState<Item[]>([
+    { name: 'Alaska', abbr: 'AK' },
+    { name: 'Connecticut', abbr: 'CT' }
+  ]);
 
   const [anotherValue, setAnotherValue] = useState('');
   const anotherRef = useRef(null);
diff --git a/src/common.ts b/src/common.ts
index 4e2cc13..22cb2cd 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -76,7 +76,7 @@ export interface FeatureProps<T> {
   deselectOnClear?: boolean;
   deselectOnChange?: boolean;
   closeOnSelect?: boolean;
-  getInlineItem: (
+  getFocusItem: (
     value: string
   ) => T | undefined | null | void | Promise<T | undefined | null | void>;
 }
diff --git a/src/features/atom/autoFocus.ts b/src/features/atom/autoFocus.ts
new file mode 100644
index 0000000..ee507cc
--- /dev/null
+++ b/src/features/atom/autoFocus.ts
@@ -0,0 +1,19 @@
+import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
+
+type AutoFocusFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
+
+const autoFocus =
+  <T>({ getFocusItem }: Pick<FeatureProps<T>, 'getFocusItem'>): AutoFocusFeature<T> =>
+  ({ setFocusItem }) => ({
+    getInputProps: () => ({
+      onChange: async (e) => {
+        const nextValue = e.target.value;
+        if (nextValue) {
+          const item = await getFocusItem(nextValue);
+          item && setFocusItem(item);
+        }
+      }
+    })
+  });
+
+export { type AutoFocusFeature, autoFocus };
diff --git a/src/features/atom/inline.ts b/src/features/atom/inline.ts
index 8bef3ed..2fc8654 100644
--- a/src/features/atom/inline.ts
+++ b/src/features/atom/inline.ts
@@ -3,7 +3,7 @@ import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
 type InlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
 
 const inline =
-  <T>({ getInlineItem }: Pick<FeatureProps<T>, 'getInlineItem'>): InlineFeature<T> =>
+  <T>({ getFocusItem }: Pick<FeatureProps<T>, 'getFocusItem'>): InlineFeature<T> =>
   ({ getItemValue, setTmpValue, setFocusItem }) => ({
     getInputProps: () => ({
       onChange: async ({ target, nativeEvent }) => {
@@ -12,7 +12,7 @@ const inline =
         }
 
         const nextValue = target.value;
-        const item = await getInlineItem(nextValue);
+        const item = await getFocusItem(nextValue);
         if (!item) return;
 
         setFocusItem(item);
diff --git a/src/features/molecule/supercomplete.ts b/src/features/molecule/supercomplete.ts
index 70c1ab5..d570d1c 100644
--- a/src/features/molecule/supercomplete.ts
+++ b/src/features/molecule/supercomplete.ts
@@ -6,17 +6,17 @@ import { type InlineFeature, inline } from '../atom/inline';
 type SupercompleteFeature<T> = MergedFeature<T, [AutocompleteFeature<T>, InlineFeature<T>]>;
 
 const supercomplete = <T>({
-  getInlineItem,
+  getFocusItem,
   ...rest
 }: Pick<
   FeatureProps<T>,
-  | 'getInlineItem'
+  | 'getFocusItem'
   | 'select'
   | 'selectOnBlur'
   | 'deselectOnClear'
   | 'deselectOnChange'
   | 'closeOnSelect'
 >): SupercompleteFeature<T> =>
-  mergeModules(autocomplete<T>({ ...rest, rovingText: true }), inline<T>({ getInlineItem }));
+  mergeModules(autocomplete<T>({ ...rest, rovingText: true }), inline<T>({ getFocusItem }));
 
 export { type SupercompleteFeature, supercomplete };
diff --git a/src/index.ts b/src/index.ts
index 021e4b3..2629958 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ export {
   type AutocompleteLiteFeature,
   autocompleteLite
 } from './features/atom/autocompleteLite';
+export { type AutoFocusFeature, autoFocus } from './features/atom/autoFocus';
 export { type AutocompleteFeature, autocomplete } from './features/molecule/autocomplete';
 export { type DropdownFeature, dropdown } from './features/molecule/dropdown';
 export { type MultiSelectFeature, multiSelect } from './features/molecule/multiSelect';
diff --git a/types/common.d.ts b/types/common.d.ts
index 20dbf31..12095e0 100644
--- a/types/common.d.ts
+++ b/types/common.d.ts
@@ -58,7 +58,7 @@ export interface FeatureProps<T> {
     deselectOnClear?: boolean;
     deselectOnChange?: boolean;
     closeOnSelect?: boolean;
-    getInlineItem: (value: string) => T | undefined | null | void | Promise<T | undefined | null | void>;
+    getFocusItem: (value: string) => T | undefined | null | void | Promise<T | undefined | null | void>;
 }
 export type AutocompleteFeatureProps<T> = Pick<FeatureProps<T>, 'rovingText' | 'select' | 'selectOnBlur' | 'deselectOnClear' | 'deselectOnChange' | 'closeOnSelect'>;
 export type Feature<T, Yield extends object> = (cx: Contextual<T> & ReturnType<Traversal<T>>) => Yield;
diff --git a/types/features/atom/autoFocus.d.ts b/types/features/atom/autoFocus.d.ts
new file mode 100644
index 0000000..f9b84d4
--- /dev/null
+++ b/types/features/atom/autoFocus.d.ts
@@ -0,0 +1,4 @@
+import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
+type AutoFocusFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
+declare const autoFocus: <T>({ getFocusItem }: Pick<FeatureProps<T>, "getFocusItem">) => AutoFocusFeature<T>;
+export { type AutoFocusFeature, autoFocus };
diff --git a/types/features/atom/inline copy.d.ts b/types/features/atom/inline copy.d.ts
new file mode 100644
index 0000000..acf861a
--- /dev/null
+++ b/types/features/atom/inline copy.d.ts	
@@ -0,0 +1,4 @@
+import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
+type InlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
+declare const inline: <T>({ getInlineItem }: Pick<FeatureProps<T>, "getInlineItem">) => InlineFeature<T>;
+export { type InlineFeature, inline };
diff --git a/types/features/atom/inline.d.ts b/types/features/atom/inline.d.ts
index acf861a..b91648b 100644
--- a/types/features/atom/inline.d.ts
+++ b/types/features/atom/inline.d.ts
@@ -1,4 +1,4 @@
 import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
 type InlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
-declare const inline: <T>({ getInlineItem }: Pick<FeatureProps<T>, "getInlineItem">) => InlineFeature<T>;
+declare const inline: <T>({ getFocusItem }: Pick<FeatureProps<T>, "getFocusItem">) => InlineFeature<T>;
 export { type InlineFeature, inline };
diff --git a/types/features/molecule/supercomplete.d.ts b/types/features/molecule/supercomplete.d.ts
index 5585909..b4c4048 100644
--- a/types/features/molecule/supercomplete.d.ts
+++ b/types/features/molecule/supercomplete.d.ts
@@ -2,5 +2,5 @@ import type { MergedFeature, FeatureProps } from '../../common';
 import { type AutocompleteFeature } from './autocomplete';
 import { type InlineFeature } from '../atom/inline';
 type SupercompleteFeature<T> = MergedFeature<T, [AutocompleteFeature<T>, InlineFeature<T>]>;
-declare const supercomplete: <T>({ getInlineItem, ...rest }: Pick<FeatureProps<T>, "select" | "selectOnBlur" | "deselectOnClear" | "deselectOnChange" | "closeOnSelect" | "getInlineItem">) => SupercompleteFeature<T>;
+declare const supercomplete: <T>({ getFocusItem, ...rest }: Pick<FeatureProps<T>, "getFocusItem" | "select" | "selectOnBlur" | "deselectOnClear" | "deselectOnChange" | "closeOnSelect">) => SupercompleteFeature<T>;
 export { type SupercompleteFeature, supercomplete };
diff --git a/types/index.d.ts b/types/index.d.ts
index 7b96007..142a4ff 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -2,6 +2,7 @@ export { useCombobox } from './hooks/useCombobox';
 export { useMultiSelect } from './hooks/useMultiSelect';
 export { useAutoHeight } from './hooks/useAutoHeight';
 export { type AutocompleteLiteFeature, autocompleteLite } from './features/atom/autocompleteLite';
+export { type AutoFocusFeature, autoFocus } from './features/atom/autoFocus';
 export { type AutocompleteFeature, autocomplete } from './features/molecule/autocomplete';
 export { type DropdownFeature, dropdown } from './features/molecule/dropdown';
 export { type MultiSelectFeature, multiSelect } from './features/molecule/multiSelect';

From 2f80d7168b83c3cdf2830c16422329237d22ad9c Mon Sep 17 00:00:00 2001
From: Zheng Song <szhsin9@gmail.com>
Date: Fri, 5 Jul 2024 22:28:36 +1000
Subject: [PATCH 2/3] Rename inline complete feature

---
 dist/cjs/index.js                             |  4 +--
 dist/esm/features/atom/autoInline.js          | 29 +++++++++++++++++++
 dist/esm/features/molecule/supercomplete.js   |  4 +--
 .../atom/{inline.ts => autoInline.ts}         |  8 ++---
 src/features/molecule/supercomplete.ts        | 12 ++++++--
 types/features/atom/autoInline.d.ts           |  4 +++
 types/features/atom/inline.d.ts               |  6 ++--
 types/features/molecule/supercomplete.d.ts    |  7 +++--
 8 files changed, 58 insertions(+), 16 deletions(-)
 create mode 100644 dist/esm/features/atom/autoInline.js
 rename src/features/atom/{inline.ts => autoInline.ts} (82%)
 create mode 100644 types/features/atom/autoInline.d.ts

diff --git a/dist/cjs/index.js b/dist/cjs/index.js
index f1bffc6..e8c86c7 100644
--- a/dist/cjs/index.js
+++ b/dist/cjs/index.js
@@ -460,7 +460,7 @@ const multiSelectDropdown = (props = {}) => mergeModules(autocompleteLite({
   selectOnBlur: false
 }), dropdownToggle(props), multiInput());
 
-const inline = ({
+const autoInline = ({
   getFocusItem
 }) => ({
   getItemValue,
@@ -494,7 +494,7 @@ const supercomplete = ({
 }) => mergeModules(autocomplete({
   ...rest,
   rovingText: true
-}), inline({
+}), autoInline({
   getFocusItem
 }));
 
diff --git a/dist/esm/features/atom/autoInline.js b/dist/esm/features/atom/autoInline.js
new file mode 100644
index 0000000..031e7df
--- /dev/null
+++ b/dist/esm/features/atom/autoInline.js
@@ -0,0 +1,29 @@
+const autoInline = ({
+  getFocusItem
+}) => ({
+  getItemValue,
+  setTmpValue,
+  setFocusItem
+}) => ({
+  getInputProps: () => ({
+    onChange: async ({
+      target,
+      nativeEvent
+    }) => {
+      if (nativeEvent.inputType !== 'insertText') {
+        return;
+      }
+      const nextValue = target.value;
+      const item = await getFocusItem(nextValue);
+      if (!item) return;
+      setFocusItem(item);
+      const itemValue = getItemValue(item);
+      const start = nextValue.length;
+      const end = itemValue.length;
+      setTmpValue(nextValue + itemValue.slice(start));
+      setTimeout(() => target.setSelectionRange(start, end), 0);
+    }
+  })
+});
+
+export { autoInline };
diff --git a/dist/esm/features/molecule/supercomplete.js b/dist/esm/features/molecule/supercomplete.js
index f9ba9eb..f7332a7 100644
--- a/dist/esm/features/molecule/supercomplete.js
+++ b/dist/esm/features/molecule/supercomplete.js
@@ -1,6 +1,6 @@
 import { mergeModules } from '../../utils/mergeModules.js';
 import { autocomplete } from './autocomplete.js';
-import { inline } from '../atom/inline.js';
+import { autoInline } from '../atom/autoInline.js';
 
 const supercomplete = ({
   getFocusItem,
@@ -8,7 +8,7 @@ const supercomplete = ({
 }) => mergeModules(autocomplete({
   ...rest,
   rovingText: true
-}), inline({
+}), autoInline({
   getFocusItem
 }));
 
diff --git a/src/features/atom/inline.ts b/src/features/atom/autoInline.ts
similarity index 82%
rename from src/features/atom/inline.ts
rename to src/features/atom/autoInline.ts
index 2fc8654..54c8eb5 100644
--- a/src/features/atom/inline.ts
+++ b/src/features/atom/autoInline.ts
@@ -1,9 +1,9 @@
 import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
 
-type InlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
+type AutoInlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
 
-const inline =
-  <T>({ getFocusItem }: Pick<FeatureProps<T>, 'getFocusItem'>): InlineFeature<T> =>
+const autoInline =
+  <T>({ getFocusItem }: Pick<FeatureProps<T>, 'getFocusItem'>): AutoInlineFeature<T> =>
   ({ getItemValue, setTmpValue, setFocusItem }) => ({
     getInputProps: () => ({
       onChange: async ({ target, nativeEvent }) => {
@@ -25,4 +25,4 @@ const inline =
     })
   });
 
-export { type InlineFeature, inline };
+export { type AutoInlineFeature, autoInline };
diff --git a/src/features/molecule/supercomplete.ts b/src/features/molecule/supercomplete.ts
index d570d1c..d63d10d 100644
--- a/src/features/molecule/supercomplete.ts
+++ b/src/features/molecule/supercomplete.ts
@@ -1,9 +1,12 @@
 import type { MergedFeature, FeatureProps } from '../../common';
 import { mergeModules } from '../../utils/mergeModules';
 import { type AutocompleteFeature, autocomplete } from './autocomplete';
-import { type InlineFeature, inline } from '../atom/inline';
+import { type AutoInlineFeature, autoInline } from '../atom/autoInline';
 
-type SupercompleteFeature<T> = MergedFeature<T, [AutocompleteFeature<T>, InlineFeature<T>]>;
+type SupercompleteFeature<T> = MergedFeature<
+  T,
+  [AutocompleteFeature<T>, AutoInlineFeature<T>]
+>;
 
 const supercomplete = <T>({
   getFocusItem,
@@ -17,6 +20,9 @@ const supercomplete = <T>({
   | 'deselectOnChange'
   | 'closeOnSelect'
 >): SupercompleteFeature<T> =>
-  mergeModules(autocomplete<T>({ ...rest, rovingText: true }), inline<T>({ getFocusItem }));
+  mergeModules(
+    autocomplete<T>({ ...rest, rovingText: true }),
+    autoInline<T>({ getFocusItem })
+  );
 
 export { type SupercompleteFeature, supercomplete };
diff --git a/types/features/atom/autoInline.d.ts b/types/features/atom/autoInline.d.ts
new file mode 100644
index 0000000..0673e8d
--- /dev/null
+++ b/types/features/atom/autoInline.d.ts
@@ -0,0 +1,4 @@
+import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
+type AutoInlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
+declare const autoInline: <T>({ getFocusItem }: Pick<FeatureProps<T>, "getFocusItem">) => AutoInlineFeature<T>;
+export { type AutoInlineFeature, autoInline };
diff --git a/types/features/atom/inline.d.ts b/types/features/atom/inline.d.ts
index b91648b..0673e8d 100644
--- a/types/features/atom/inline.d.ts
+++ b/types/features/atom/inline.d.ts
@@ -1,4 +1,4 @@
 import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
-type InlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
-declare const inline: <T>({ getFocusItem }: Pick<FeatureProps<T>, "getFocusItem">) => InlineFeature<T>;
-export { type InlineFeature, inline };
+type AutoInlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
+declare const autoInline: <T>({ getFocusItem }: Pick<FeatureProps<T>, "getFocusItem">) => AutoInlineFeature<T>;
+export { type AutoInlineFeature, autoInline };
diff --git a/types/features/molecule/supercomplete.d.ts b/types/features/molecule/supercomplete.d.ts
index b4c4048..4dcfe80 100644
--- a/types/features/molecule/supercomplete.d.ts
+++ b/types/features/molecule/supercomplete.d.ts
@@ -1,6 +1,9 @@
 import type { MergedFeature, FeatureProps } from '../../common';
 import { type AutocompleteFeature } from './autocomplete';
-import { type InlineFeature } from '../atom/inline';
-type SupercompleteFeature<T> = MergedFeature<T, [AutocompleteFeature<T>, InlineFeature<T>]>;
+import { type AutoInlineFeature } from '../atom/autoInline';
+type SupercompleteFeature<T> = MergedFeature<T, [
+    AutocompleteFeature<T>,
+    AutoInlineFeature<T>
+]>;
 declare const supercomplete: <T>({ getFocusItem, ...rest }: Pick<FeatureProps<T>, "getFocusItem" | "select" | "selectOnBlur" | "deselectOnClear" | "deselectOnChange" | "closeOnSelect">) => SupercompleteFeature<T>;
 export { type SupercompleteFeature, supercomplete };

From 62dd9577cf2457798be37d785ecc344d0c48c557 Mon Sep 17 00:00:00 2001
From: Zheng Song <szhsin9@gmail.com>
Date: Fri, 5 Jul 2024 22:29:39 +1000
Subject: [PATCH 3/3] 0.9.2

---
 dist/esm/features/atom/inline.js           | 29 ----------------------
 examples/package-lock.json                 |  2 +-
 package-lock.json                          |  4 +--
 package.json                               |  2 +-
 types/features/atom/inline copy.d.ts       |  4 ---
 types/features/atom/inline.d.ts            |  4 ---
 types/features/molecule/supercomplete.d.ts |  2 +-
 7 files changed, 5 insertions(+), 42 deletions(-)
 delete mode 100644 dist/esm/features/atom/inline.js
 delete mode 100644 types/features/atom/inline copy.d.ts
 delete mode 100644 types/features/atom/inline.d.ts

diff --git a/dist/esm/features/atom/inline.js b/dist/esm/features/atom/inline.js
deleted file mode 100644
index b79050f..0000000
--- a/dist/esm/features/atom/inline.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const inline = ({
-  getFocusItem
-}) => ({
-  getItemValue,
-  setTmpValue,
-  setFocusItem
-}) => ({
-  getInputProps: () => ({
-    onChange: async ({
-      target,
-      nativeEvent
-    }) => {
-      if (nativeEvent.inputType !== 'insertText') {
-        return;
-      }
-      const nextValue = target.value;
-      const item = await getFocusItem(nextValue);
-      if (!item) return;
-      setFocusItem(item);
-      const itemValue = getItemValue(item);
-      const start = nextValue.length;
-      const end = itemValue.length;
-      setTmpValue(nextValue + itemValue.slice(start));
-      setTimeout(() => target.setSelectionRange(start, end), 0);
-    }
-  })
-});
-
-export { inline };
diff --git a/examples/package-lock.json b/examples/package-lock.json
index a43bf64..140926f 100644
--- a/examples/package-lock.json
+++ b/examples/package-lock.json
@@ -24,7 +24,7 @@
     },
     "..": {
       "name": "@szhsin/react-autocomplete",
-      "version": "0.9.1",
+      "version": "0.9.2",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.23.2",
diff --git a/package-lock.json b/package-lock.json
index 255ff22..a5d752f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@szhsin/react-autocomplete",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@szhsin/react-autocomplete",
-      "version": "0.9.1",
+      "version": "0.9.2",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.23.2",
diff --git a/package.json b/package.json
index 1f2bb0a..e28d2e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@szhsin/react-autocomplete",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "",
   "author": "Zheng Song",
   "license": "MIT",
diff --git a/types/features/atom/inline copy.d.ts b/types/features/atom/inline copy.d.ts
deleted file mode 100644
index acf861a..0000000
--- a/types/features/atom/inline copy.d.ts	
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
-type InlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
-declare const inline: <T>({ getInlineItem }: Pick<FeatureProps<T>, "getInlineItem">) => InlineFeature<T>;
-export { type InlineFeature, inline };
diff --git a/types/features/atom/inline.d.ts b/types/features/atom/inline.d.ts
deleted file mode 100644
index 0673e8d..0000000
--- a/types/features/atom/inline.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { Feature, GetPropsFunctions, FeatureProps } from '../../common';
-type AutoInlineFeature<T> = Feature<T, Pick<GetPropsFunctions<T>, 'getInputProps'>>;
-declare const autoInline: <T>({ getFocusItem }: Pick<FeatureProps<T>, "getFocusItem">) => AutoInlineFeature<T>;
-export { type AutoInlineFeature, autoInline };
diff --git a/types/features/molecule/supercomplete.d.ts b/types/features/molecule/supercomplete.d.ts
index 4dcfe80..4a7d745 100644
--- a/types/features/molecule/supercomplete.d.ts
+++ b/types/features/molecule/supercomplete.d.ts
@@ -5,5 +5,5 @@ type SupercompleteFeature<T> = MergedFeature<T, [
     AutocompleteFeature<T>,
     AutoInlineFeature<T>
 ]>;
-declare const supercomplete: <T>({ getFocusItem, ...rest }: Pick<FeatureProps<T>, "getFocusItem" | "select" | "selectOnBlur" | "deselectOnClear" | "deselectOnChange" | "closeOnSelect">) => SupercompleteFeature<T>;
+declare const supercomplete: <T>({ getFocusItem, ...rest }: Pick<FeatureProps<T>, "select" | "selectOnBlur" | "deselectOnClear" | "deselectOnChange" | "closeOnSelect" | "getFocusItem">) => SupercompleteFeature<T>;
 export { type SupercompleteFeature, supercomplete };