feat: adds select component (EightfoldAI#155)

src/components/Dropdown/Dropdown.tsx

@@ -41,6 +41,7 @@ export const Dropdown: FC<DropdownProps> = ({
     offset = 0,
     positionStrategy = 'absolute',
     onVisibleChange,
+    showDropdown,
     disabled,
     closeOnDropdownClick = true,
 }) => {
@@ -56,16 +57,18 @@ export const Dropdown: FC<DropdownProps> = ({
     });
 
     const toggle: Function =
-        (show: boolean): Function =>
+        (show: boolean, showDropdown = (show: boolean) => show): Function =>
         (e: SyntheticEvent): void => {
+            // to control the toggle behaviour
+            const updatedShow = showDropdown(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 +139,9 @@ export const Dropdown: FC<DropdownProps> = ({
                 style={dropdownStyles}
                 className={dropdownClasses}
                 tabIndex={0}
-                onClick={closeOnDropdownClick ? toggle(false) : null}
+                onClick={
+                    closeOnDropdownClick ? toggle(false, showDropdown) : null
+                }
                 id={dropdownId}
             >
                 {overlay}
@@ -149,7 +154,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,
+                          showDropdown
+                      ),
+                  }
                 : {})}
         >
             {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,13 @@ export interface DropdownProps {
      * @param visible {boolean}
      */
     onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Callback to control the show/hide behavior of the dropdown.
+     * triggered before the visible change
+     * @param show {boolean}
+     * @returns true or false.
+     */
+    showDropdown?: (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;
 }

src/components/Inputs/TextInput/TextInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { ButtonSize, DefaultButton } from '../../Button';
 import { Icon, IconName, IconSize } from '../../Icon';
 import { Label } from '../../Label';
@@ -32,18 +32,21 @@ export const TextInput: FC<TextInputProps> = ({
     numbersOnly = false,
     onBlur,
     onChange,
+    onClear,
     onFocus,
     onKeyDown,
     placeholder,
     required = false,
+    readonly = false,
     shape = TextInputShape.Rectangle,
     style,
     theme = TextInputTheme.light,
     value,
     waitInterval = 10,
+    clearable = true,
     ...rest
 }) => {
-    const [clearButtonShown, setClearButtonShown] = useState<boolean>(false);
+    const [clearButtonShown, _setClearButtonShown] = useState<boolean>(false);
     const [inputId] = useState<string>(uniqueId(id || 'input-'));
     const inputField: HTMLElement = document.getElementById(inputId);
 
@@ -111,12 +114,26 @@ export const TextInput: FC<TextInputProps> = ({
         },
     ]);
 
+    useEffect(() => {
+        if (value?.toString()?.length > 0) {
+            return setClearButtonShown(true);
+        }
+        setClearButtonShown(false);
+    }, [value]);
+
+    const setClearButtonShown = (showClear: boolean) => {
+        return !clearable
+            ? _setClearButtonShown(false)
+            : _setClearButtonShown(showClear);
+    };
+
     const handleOnClear = (_event: React.MouseEvent) => {
         _event.preventDefault();
         _event.stopPropagation();
         if (!!inputField) {
             (inputField as HTMLInputElement).value = '';
         }
+        onClear?.(_event);
         setClearButtonShown(false);
     };
 
@@ -168,6 +185,7 @@ export const TextInput: FC<TextInputProps> = ({
                 tabIndex={0}
                 type={numbersOnly ? 'number' : htmlType}
                 value={value}
+                readOnly={readonly}
             />
             {iconProps && (
                 <div className={iconClassNames}>

src/components/Pills/Pill.tsx

@@ -40,6 +40,7 @@ export const Pill: FC<PillProps> = React.forwardRef(
         ]);
         const tagClassName: string = mergeClasses([
             styles.tagPills,
+            rest.classNames,
             { [styles.red]: theme === 'red' },
             { [styles.orange]: theme === 'orange' },
             { [styles.yellow]: theme === 'yellow' },