✨ Add AutoCompleteFixedItem Component.

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

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';

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,16 +80,15 @@ export const AutoCompleteItem = forwardRef<AutoCompleteItem, 'div'>(
 );
 
 AutoCompleteItem.displayName = 'AutoCompleteItem';
-
-const baseStyles: FlexProps = {
+export const itemBaseStyles: FlexProps = {
   mx: '2',
   px: '2',
   py: '2',
   rounded: 'md',
   cursor: 'pointer',
 };
 
-const activeStyles: FlexProps = {
+export const itemActiveStyles: FlexProps = {
   bg: 'whiteAlpha.100',
   _light: {
     bg: 'gray.200',

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));

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';