feat: adds select component

src/components/Dropdown/Dropdown.tsx

@@ -41,6 +41,7 @@ export const Dropdown: FC<DropdownProps> = ({
     offset = 0,
     positionStrategy = 'absolute',
     onVisibleChange,
+    beforeToggleStateChange,
     disabled,
     closeOnDropdownClick = true,
 }) => {
@@ -56,16 +57,21 @@ export const Dropdown: FC<DropdownProps> = ({
     });
 
     const toggle: Function =
-        (show: boolean): Function =>
+        (
+            show: boolean,
+            beforeToggleStateChange = (show: boolean) => show
+        ): Function =>
         (e: SyntheticEvent): void => {
+            // to control the toggle behaviour
+            const updatedShow = beforeToggleStateChange(show);
             if (PREVENT_DEFAULT_TRIGGERS.includes(trigger)) {
                 e.preventDefault();
             }
-            setClosing(!show);
+            setClosing(!updatedShow);
             timeout && clearTimeout(timeout);
             timeout = setTimeout(
                 () => {
-                    setVisible(show);
+                    setVisible(updatedShow);
                 },
                 !show ? ANIMATION_DURATION : 0
             );
@@ -136,7 +142,11 @@ export const Dropdown: FC<DropdownProps> = ({
                 style={dropdownStyles}
                 className={dropdownClasses}
                 tabIndex={0}
-                onClick={closeOnDropdownClick ? toggle(false) : null}
+                onClick={
+                    closeOnDropdownClick
+                        ? toggle(false, beforeToggleStateChange)
+                        : null
+                }
                 id={dropdownId}
             >
                 {overlay}
@@ -149,7 +159,12 @@ export const Dropdown: FC<DropdownProps> = ({
             style={style}
             ref={reference}
             {...(TRIGGER_TO_HANDLER_MAP_ON_LEAVE[trigger]
-                ? { [TRIGGER_TO_HANDLER_MAP_ON_LEAVE[trigger]]: toggle(false) }
+                ? {
+                      [TRIGGER_TO_HANDLER_MAP_ON_LEAVE[trigger]]: toggle(
+                          false,
+                          beforeToggleStateChange
+                      ),
+                  }
                 : {})}
         >
             {getReference()}

src/components/Dropdown/Dropdown.types.ts

@@ -1,5 +1,5 @@
-import { Placement, Strategy } from '@floating-ui/react-dom';
 import React from 'react';
+import { Placement, Strategy } from '@floating-ui/react-dom';
 
 export interface DropdownProps {
     /**
@@ -11,6 +11,11 @@ export interface DropdownProps {
      * @param visible {boolean}
      */
     onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Callback to
+     * @param visible {boolean}
+     */
+    beforeToggleStateChange?: (show: boolean) => boolean;
     /**
      * The dropdown content
      */

src/components/Inputs/Input.types.ts

@@ -179,6 +179,18 @@ export interface TextInputProps extends InputProps<HTMLInputElement> {
      * @default false
      */
     required?: boolean;
+
+    /**
+     * option to show the clear input button.
+     * default is true for backward compatibility
+     * @default true
+     */
+    clearable?: boolean;
+
+    /**
+     * onclear event handler.
+     */
+    onClear?: React.MouseEventHandler<Element>;
 }
 
 export interface InputProps<T>
@@ -283,4 +295,10 @@ export interface InputProps<T>
      * @default 10
      */
     waitInterval?: number;
+
+    /**
+     * input readonly.
+     * @default false
+     */
+    readonly?: boolean;
 }