@rovula/ui 0.0.29 → 0.0.31

package/dist/theme/presets/colors.js

@@ -71,6 +71,27 @@ module.exports = {
         "input-label-bg": withColorMixin("--input-color-label-bg"),
         "input-error": withColorMixin("--input-color-error"),
 
+        "function-default-solid": withColorMixin("--function-default-solid"),
+        "function-default-hover": withColorMixin("--function-default-hover"),
+        "function-default-hover-bg": withColorMixin(
+          "--function-default-hover-bg"
+        ),
+        "function-default-hover-bg": withColorMixin(
+          "--function-default-hover-bg"
+        ),
+        "function-default-stroke": withColorMixin("--function-default-stroke"),
+        "function-default-icon": withColorMixin("--function-default-icon"),
+        "function-default-outline": withColorMixin(
+          "--function-default-outline-icon"
+        ),
+        "function-active-solid": withColorMixin("--function-active-solid"),
+        "function-active-hover": withColorMixin("--function-active-hover"),
+        "function-active-hover-bg": withColorMixin(
+          "--function-active-hover-bg"
+        ),
+        "function-active-stroke": withColorMixin("--function-active-stroke"),
+        "function-active-icon": withColorMixin("--function-active-icon"),
+
         "base-bg": withColorMixin("--base-color-bg"),
         "base-bg2": withColorMixin("--base-color-bg2"),
         "base-bg3": withColorMixin("--base-color-bg3"),

package/dist/theme/themes/xspector/color.css

@@ -11,6 +11,19 @@
   --input-color-label-bg: #2d2e30;
   --input-color-error: #ff4d35;
 
+  /* Function button */
+  --function-default-solid: #ececec;
+  --function-default-hover: #fafafa;
+  --function-default-hover-bg: rgba(250 250 250 / 0.08);
+  --function-default-stroke: rgba(158 158 158 / 0.24);
+  --function-default-icon: #212b36;
+  --function-default-outline-icon: #9e9e9e;
+  --function-active-solid: #b1a400;
+  --function-active-hover: #ddcd00;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #212b36;
+
   --text-dark: #212b36;
   --text-medium: #637381;
   --text-light: #919eab;

package/dist/theme/themes/xspector/components/action-button.css

@@ -12,34 +12,34 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-secondary-default);
-  --action-button-solid-default-border: var(--state-color-secondary-default);
-  --action-button-solid-default-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
 
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
 
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
 
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-primary-default);
-  --action-button-solid-active-border: var(--state-color-primary-default);
-  --action-button-solid-active-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
 
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
 
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
 
 
   /* ------------------------------------------------------------------ */
@@ -47,52 +47,54 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-outline-default-border: var(--state-color-secondary-stroke);
-  --action-button-outline-default-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
-  --action-button-outline-active-border: var(--state-color-primary-stroke);
-  --action-button-outline-active-text: var(--state-color-primary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
 
   /* ------------------------------------------------------------------ */
   /* Icon Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-icon-default-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-secondary-hover-bg);
-  --action-button-icon-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
+  --action-button-icon-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-icon-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
-  --action-button-icon-active-text: var(--state-color-primary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-icon-active-hover-text: var(--state-color-primary-text-hover);
-  --action-button-icon-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
+
+  /* Active Pressed State */
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
 }

package/dist/theme/themes/xspector/state.css

@@ -84,6 +84,6 @@
   --state-color-error-text-pressed: #a5210f;
 
   --state-color-disable-solid: #454f5b;
-  --state-color-disable-outline: #D3DADF;
+  --state-color-disable-outline: #637381;
 }
 

package/dist/theme/tokens/color.css

@@ -11,6 +11,19 @@
   --input-color-label-bg: #ffffff;/* #2d2e30; */
   --input-color-error: #ed2f15;
 
+  /* Function button */
+  --function-default-solid: #1e3249;
+  --function-default-hover: #35475b;
+  --function-default-hover-bg: rgba(30 50 73 / 0.08);
+  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: #1e3249;
+  --function-active-solid: #9b8f00;
+  --function-active-hover: #b1a400;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #ffffff;
+
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;

package/dist/theme/tokens/components/action-button.css

@@ -12,34 +12,34 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-primary-default);
-  --action-button-solid-default-border: var(--state-color-primary-default);
-  --action-button-solid-default-text: var(--state-color-primary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
 
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
 
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
 
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-secondary-default);
-  --action-button-solid-active-border: var(--state-color-secondary-default);
-  --action-button-solid-active-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
 
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
 
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
 
   /* Disabled State */
   --action-button-solid-disabled-bg: var(--state-color-disable-solid);
@@ -53,33 +53,33 @@
 
   /* Default State */
   --action-button-outline-default-bg: transparent;
-  --action-button-outline-default-border: var(--state-color-primary-stroke);
-  --action-button-outline-default-text: var(--state-color-primary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
   --action-button-outline-active-bg: transparent;
-  --action-button-outline-active-border: var(--state-color-secondary-stroke);
-  --action-button-outline-active-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
 
   /* Disabled State */
   --action-button-outline-disabled-bg: transparent;
@@ -93,32 +93,32 @@
   /* Default State */
   --action-button-icon-default-bg: transparent;
   --action-button-icon-default-border: transparent;
-  --action-button-icon-default-text: var(--state-color-primary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-primary-hover-bg);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
   --action-button-icon-hover-border: transparent;
-  --action-button-icon-hover-text: var(--state-color-primary-text-hover);
+  --action-button-icon-hover-text: var(--function-default-hover);
 
   /* Pressed State */
   --action-button-icon-pressed-bg: transparent;
   --action-button-icon-pressed-border: transparent;
-  --action-button-icon-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
   --action-button-icon-active-bg: transparent;
   --action-button-icon-active-border: transparent;
-  --action-button-icon-active-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-secondary-hover-bg);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
   --action-button-icon-active-hover-border: transparent;
-  --action-button-icon-active-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
   --action-button-icon-active-pressed-bg: transparent;
   --action-button-icon-active-pressed-border: transparent;
-  --action-button-icon-active-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
 
   /* Disabled State */
   --action-button-icon-disabled-bg: transparent;

package/package.json

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

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5">
+      <div className="p-5 bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/Checkbox/Checkbox.tsx

@@ -14,14 +14,14 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-primary ring-offset-background",
-      "hover:border-primary-hover",
+      "peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background",
+      "hover:border-function-default-hover",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline",
       {
-        "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground":
+        "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon":
           !props.disabled,
-        "hover:data-[state=checked]:border-secondary-hover hover:data-[state=checked]:bg-secondary-hover":
+        "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover":
           !props.disabled,
         "bg-state-disable-solid": props.checked && props.disabled,
       },

package/src/components/DatePicker/DatePicker.tsx

@@ -35,13 +35,15 @@ const DatePicker: FC<DatePickerProps> = ({
           <div className="flex">
             <TextInput
               fullwidth
-              id="2"
+              id="2" // TODO
               readOnly
               label="Date"
               size="md"
               value={date ? format(date, "dd MMM yyyy") : isOpen ? " " : ""}
               hasClearIcon={false}
-              endIcon={<CalendarIcon fill="inherit" />}
+              endIcon={
+                <CalendarIcon fill="inherit" className="cursor-pointer" />
+              }
               {...textInputProps}
             />
           </div>

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

@@ -33,6 +33,7 @@ export const Default = {
   args: {
     label: "Choose an option:",
     fullwidth: true,
+    isFloatingLabel: true,
     options,
   },
   render: (args) => {

package/src/components/Dropdown/Dropdown.styles.ts

@@ -45,7 +45,7 @@ export const customInputVariant = cva([], {
     size: {
       sm: "pe-[30px]",
       md: "pe-[40px]",
-      lg: "pe-[48px]",
+      lg: "pe-[68px]",
     },
   },
   defaultVariants: {

package/src/components/Dropdown/Dropdown.tsx

@@ -17,6 +17,7 @@ import {
 } from "./Dropdown.styles";
 
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
 
 type RenderLabelCallbackArg = {
   value: string;
@@ -45,10 +46,16 @@ export type DropdownProps = {
   error?: boolean;
   required?: boolean;
   className?: string;
+  optionContainerClassName?: string;
   options: Options[];
   value?: Options;
   onChangeText?: InputProps["onChange"];
   onSelect?: (value: Options) => void;
+  renderOptions?: (value: {
+    optionsFiltered: Options[];
+    selectedOption: Options | null | undefined;
+    onClick: (option: Options) => void;
+  }) => ReactNode;
 } & Omit<InputProps, "value">;
 
 const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
@@ -70,6 +77,8 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       required = true,
       onChangeText,
       onSelect,
+      renderOptions: customRenderOptions,
+      optionContainerClassName,
       ...props
     },
     ref
@@ -84,15 +93,18 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     const keyCode = useRef("");
 
     useEffect(() => {
-      if (value && !selectedOption) {
-        setSelectedOption(value);
-      }
-    }, [value, selectedOption]);
+      setSelectedOption(value);
+      setTextValue(value?.label ?? "");
+    }, [value]);
 
     const handleOnChangeText = useCallback(
       (event: React.ChangeEvent<HTMLInputElement>) => {
         onChangeText?.(event);
         setTextValue(event.target.value);
+
+        if (!event.target.value) {
+          clearMismatchValue(event as any);
+        }
       },
       [onChangeText]
     );
@@ -114,42 +126,61 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       );
     }, [options, filterMode, textValue]);
 
-    const renderOptions = () => (
-      <ul className="absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto">
-        {optionsFiltered.map((option) => {
-          if (option.renderLabel) {
+    const renderOptions = () => {
+      if (customRenderOptions) {
+        return customRenderOptions({
+          optionsFiltered,
+          selectedOption,
+          onClick: handleOptionClick,
+        });
+      }
+
+      return (
+        <ul
+          className={cn(
+            "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto",
+            optionContainerClassName
+          )}
+        >
+          {optionsFiltered.map((option) => {
+            if (option.renderLabel) {
+              return (
+                <Fragment key={option.value}>
+                  {option.renderLabel({
+                    value: option.value,
+                    label: option.label,
+                    handleOnClick: () => handleOptionClick(option),
+                    className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${
+                      selectedOption?.value === option.value
+                        ? " bg-gray-200"
+                        : ""
+                    }`,
+                  })}
+                </Fragment>
+              );
+            }
             return (
-              <Fragment key={option.value}>
-                {option.renderLabel({
-                  value: option.value,
-                  label: option.label,
-                  handleOnClick: () => handleOptionClick(option),
-                  className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${
-                    selectedOption?.value === option.value ? " bg-gray-200" : ""
-                  }`,
-                })}
-              </Fragment>
+              <li
+                key={option.value}
+                onMouseDown={() => handleOptionClick(option)}
+                className={`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${
+                  selectedOption?.value === option.value
+                    ? "bg-base-popup-highligh"
+                    : ""
+                }`}
+              >
+                {option.label}
+              </li>
             );
-          }
-          return (
-            <li
-              key={option.value}
-              onMouseDown={() => handleOptionClick(option)}
-              className={`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${
-                selectedOption?.value === option.value
-                  ? "bg-base-popup-highligh"
-                  : ""
-              }`}
-            >
-              {option.label}
+          })}
+          {optionsFiltered.length === 0 && (
+            <li className="px-4 py-14 text-center text-input-text">
+              Not found
             </li>
-          );
-        })}
-        {optionsFiltered.length === 0 && (
-          <li className="px-4 py-14 text-center text-input-text">Not found</li>
-        )}
-      </ul>
-    );
+          )}
+        </ul>
+      );
+    };
 
     const handleOnFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement, Element>) => {
@@ -196,7 +227,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         clearMismatchValue(e);
         props?.onBlur?.(e);
       },
-      [props?.onBlur]
+      [props?.onBlur, clearMismatchValue]
     );
 
     const handleOnKeyDown = useCallback(