From 0936f2b859b9396b27c6e91625aa4b70e2e2a495 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Mon, 31 May 2021 22:31:39 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20`AutoCompleteFixedItem`=20Com?=
 =?UTF-8?q?ponent.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/app.tsx                  |  9 ++++-----
 src/auto-complete-fixed-item.tsx | 18 ++++++++++++++++++
 src/auto-complete-item.tsx       | 13 ++++++-------
 src/helpers/list.ts              |  2 +-
 src/index.tsx                    |  1 +
 5 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 src/auto-complete-fixed-item.tsx

diff --git a/example/app.tsx b/example/app.tsx
index 894b57c..62441ba 100644
--- a/example/app.tsx
+++ b/example/app.tsx
@@ -6,6 +6,7 @@ import {
   AutoCompleteItem,
   AutoCompleteList,
   AutoCompleteChildProps,
+  AutoCompleteFixedItem,
 } from '../.';
 import { Button, Flex, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { useTheme } from '@chakra-ui/system';
@@ -54,12 +55,10 @@ const App = () => {
               </AutoCompleteItem>
             ))}
           </AutoCompleteGroup>
-          <AutoCompleteItem
-            fixed
-            onClick={() => setOptions(o => [...o, 'new'])}
-          >
+          <AutoCompleteFixedItem onClick={() => setOptions(o => [...o, 'new'])}>
             Create New
-          </AutoCompleteItem>
+          </AutoCompleteFixedItem>
+          <Flex onClick={() => setOptions(o => [...o, 'new'])}>Create New</Flex>
         </AutoCompleteList>
       </AutoComplete>
       <Button
diff --git a/src/auto-complete-fixed-item.tsx b/src/auto-complete-fixed-item.tsx
new file mode 100644
index 0000000..59d188d
--- /dev/null
+++ b/src/auto-complete-fixed-item.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexProps, forwardRef } from '@chakra-ui/react';
+import React from 'react';
+import { itemActiveStyles, itemBaseStyles } from './auto-complete-item';
+
+export const AutoCompleteFixedItem = forwardRef<FlexProps, 'div'>(
+  (props, ref) => {
+    return (
+      <Flex
+        {...itemBaseStyles}
+        _hover={itemActiveStyles}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+AutoCompleteFixedItem.displayName = 'AutoCompleteFixedItem';
diff --git a/src/auto-complete-item.tsx b/src/auto-complete-item.tsx
index 61d6564..9ce17b3 100644
--- a/src/auto-complete-item.tsx
+++ b/src/auto-complete-item.tsx
@@ -7,14 +7,14 @@ import { useEmphasizer } from './helpers/item';
 import { StoreContext } from './store';
 import { ItemAction } from './store/reducers/item';
 
-interface AutoCompleteItem extends FlexProps {
+interface AutoCompleteItemProps extends FlexProps {
   value: string;
   _focus?: CSSObject | any;
   optionKey?: string;
   // disabled?: boolean;
 }
 
-export const AutoCompleteItem = forwardRef<AutoCompleteItem, 'div'>(
+export const AutoCompleteItem = forwardRef<AutoCompleteItemProps, 'div'>(
   (props, ref) => {
     const {
       children,
@@ -62,9 +62,9 @@ export const AutoCompleteItem = forwardRef<AutoCompleteItem, 'div'>(
       <Flex
         onMouseOver={handleMouseOver}
         onClick={handleOnClick}
-        {...baseStyles}
+        {...itemBaseStyles}
         _hover={_hover}
-        {...(isActiveItem && (_focus || activeStyles))}
+        {...(isActiveItem && (_focus || itemActiveStyles))}
         sx={{
           ...sx,
           '.emphasizedItem': emphasizeStyles,
@@ -80,8 +80,7 @@ export const AutoCompleteItem = forwardRef<AutoCompleteItem, 'div'>(
 );
 
 AutoCompleteItem.displayName = 'AutoCompleteItem';
-
-const baseStyles: FlexProps = {
+export const itemBaseStyles: FlexProps = {
   mx: '2',
   px: '2',
   py: '2',
@@ -89,7 +88,7 @@ const baseStyles: FlexProps = {
   cursor: 'pointer',
 };
 
-const activeStyles: FlexProps = {
+export const itemActiveStyles: FlexProps = {
   bg: 'whiteAlpha.100',
   _light: {
     bg: 'gray.200',
diff --git a/src/helpers/list.ts b/src/helpers/list.ts
index 2115dfd..17840d3 100644
--- a/src/helpers/list.ts
+++ b/src/helpers/list.ts
@@ -36,7 +36,7 @@ export const getItemKeys: string[] | any = (children: ReactNode) => {
 
   React.Children.map(children, (child: any) => {
     if (isChild(child, 'AutoCompleteItem')) items.push(getChildProps(child));
-    else
+    else if (isChild(child, 'AutoCompleteGroup'))
       return child.props.children?.map((option: any) => {
         if (isChild(option, 'AutoCompleteItem'))
           items.push(getChildProps(option));
diff --git a/src/index.tsx b/src/index.tsx
index 3c1aedf..90e0da3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,7 @@ export {
 export * from './auto-complete-input';
 export * from './auto-complete-list';
 export * from './auto-complete-item';
+export * from './auto-complete-fixed-item';
 export * from './auto-complete-group';
 // export { AutoCompleteTags } from './auto-complete-tags';