From dc1bfc6182f61e4385787fdc3c249be6c4117e82 Mon Sep 17 00:00:00 2001
From: Brandon Martel <brandonmartel@gmail.com>
Date: Sun, 8 Aug 2021 09:57:10 -0500
Subject: [PATCH] add tag for newly added options when create option is enabled

---
 example/src/App.tsx |  4 ++--
 src/MultiSelect.tsx | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index d367454..94be675 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -82,10 +82,10 @@ const _options = items.map((label) => ({ label, value: label.toLowerCase() }))
 const StatefulMultiSelect: FC<
   Omit<MultiSelectProps, 'onChange' | 'value'> &
     Partial<Pick<MultiSelectProps, 'onChange' | 'value'>>
-> = ({ onChange: _onChange, value: _value, ...props }) => {
+> = ({ onChange: _onChange, value: _value, options: __options, ...props }) => {
   const { value, options, onChange } = useMultiSelect({
     value: _value || props.single ? '' : [],
-    options: props.options!,
+    options: __options!,
     onChange: _onChange,
   })
 
diff --git a/src/MultiSelect.tsx b/src/MultiSelect.tsx
index 03f6cf6..6e4a033 100644
--- a/src/MultiSelect.tsx
+++ b/src/MultiSelect.tsx
@@ -109,7 +109,7 @@ export const SelectLabel = memo<HTMLChakraProps<'label'>>((props) => {
 SelectLabel.displayName = 'SelectLabel'
 
 export const SelectOptionItem = memo<SelectOptionItemProps>(
-  ({ value, label, index, selected, ...props }) => {
+  ({ value, label, index, selected, created, ...props }) => {
     const { highlightedRef, option, ...itemProps } = useSelectItem({
       value,
       label,
@@ -123,7 +123,16 @@ export const SelectOptionItem = memo<SelectOptionItemProps>(
         {...props}
         {...itemProps}
       >
-        {option?.label || value}
+        <HStack justifyContent='space-between' w='full'>
+          <Box>{option?.label || value}</Box>
+          {!!created && (
+            <Tag flexShrink={0}>
+              <TagLabel fontSize='xs' fontWeight='bold'>
+                New
+              </TagLabel>
+            </Tag>
+          )}
+        </HStack>
       </chakra.li>
     )
   }
@@ -148,6 +157,7 @@ export const SelectList = memo(() => {
         value: optionItem.value,
         label: optionItem.label || labelFromValue(optionItem.value),
         selected: optionItem.selected,
+        created: optionItem.created,
         index,
       }
     },