@rovula/ui 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Dropdown, { Options } from "./Dropdown";
 import Button from "../Button/Button";
@@ -53,15 +53,37 @@ export const Default = {
 const DropdownWithRef = (props: any) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const [options, setOptions] = useState(customOptions);
+  const [value, setValue] = useState<Options>({
+    label: "",
+    value: "",
+  });
+  const [text, setText] = useState("");
+
   return (
     <Dropdown
       id="1"
       size="lg"
       {...props}
+      value={value}
+      options={options}
       ref={inputRef}
       labelClassName="peer-focus:bg-red-500"
+      onSelect={setValue}
+      onChangeText={(e) => setText(e.target.value)}
       onKeyDown={(e) => {
         if (e.code === "Enter") {
+          setOptions((options) => [
+            ...options,
+            {
+              label: text,
+              value: text,
+            },
+          ]);
+          setValue({
+            label: text,
+            value: text,
+          });
           inputRef.current?.blur?.();
         }
       }}
@@ -83,7 +105,7 @@ export const WithRef = {
     };
     return (
       <div className="flex flex-row gap-4 w-full">
-        <DropdownWithRef id="1" size="lg" options={options} {...args} />\
+        <DropdownWithRef id="1" size="lg" options={options} {...args} />
       </div>
     );
   },
@@ -126,7 +148,7 @@ export const CustomOption = {
     };
     return (
       <div className="flex flex-row gap-4 w-full">
-        <DropdownWithRef id="1" size="lg" options={options} {...args} />\
+        <DropdownWithRef id="1" size="lg" options={options} {...args} />
       </div>
     );
   },

package/src/components/Dropdown/Dropdown.tsx

@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 
@@ -80,6 +81,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       Options | null | undefined
     >(null);
     const [textValue, setTextValue] = useState("");
+    const keyCode = useRef("");
 
     useEffect(() => {
       if (value && !selectedOption) {
@@ -147,6 +149,62 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       </ul>
     );
 
+    const handleOnFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        setIsFocused(true);
+        props?.onFocus?.(e);
+      },
+      [props?.onFocus]
+    );
+
+    const clearMismatchValue = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        const matchSelectedValue = optionsFiltered.find(
+          (opt) =>
+            opt.value === e.target?.value || opt.label === e.target?.value
+        );
+        const isMatchSelectedValue = !!matchSelectedValue;
+
+        let option = matchSelectedValue || {
+          value: "",
+          label: "",
+        };
+
+        if (!isMatchSelectedValue && textValue) {
+          option = {
+            value: "",
+            label: "",
+          };
+        }
+
+        if (keyCode.current === "Enter") {
+          return;
+        }
+
+        setSelectedOption(option);
+        setTextValue(option.label);
+        onSelect?.(option);
+      },
+      [optionsFiltered, textValue]
+    );
+
+    const handleOnBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        setIsFocused(false);
+        clearMismatchValue(e);
+        props?.onBlur?.(e);
+      },
+      [props?.onBlur]
+    );
+
+    const handleOnKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        keyCode.current = e.code;
+        props?.onKeyDown?.(e);
+      },
+      [props?.onKeyDown]
+    );
+
     return (
       <div className={`relative ${fullwidth ? "w-full" : ""}`}>
         <TextInput
@@ -170,8 +228,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           hasClearIcon={false}
           size={size}
           className={customInputVariant({ size })}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          onKeyDown={handleOnKeyDown}
           endIcon={
             <div className={iconWrapperVariant({ size })}>
               <ChevronDownIcon