[WEB-1201] dev: dropdowns (#4721)

* chore: lodash package added

* chore: dropdown key down hook added

* dev: dropdown component

* chore: build error and code refactor

* chore: readme file updated

packages/ui/src/dropdown/Readme.md

@@ -0,0 +1,44 @@
+Below is a detailed list of the props included:
+
+### Root Props
+- value: string | string[]; - Current selected value.
+- onChange: (value: string | string []) => void; - Callback function for handling value changes.
+- options: TDropdownOption[] | undefined; - Array of options.
+- onOpen?: () => void; - Callback function triggered when the dropdown opens.
+- onClose?: () => void; - Callback function triggered when the dropdown closes.
+- containerClassName?: (isOpen: boolean) => string; - Function to return the class name for the container based on the open state.
+- tabIndex?: number; - Sets the tab index for the dropdown.
+- placement?: Placement; - Determines the placement of the dropdown (e.g., top, bottom, left, right).
+- disabled?: boolean; - Disables the dropdown if set to true.
+
+---
+
+### Button Props
+- buttonContent?: (isOpen: boolean) => React.ReactNode; - Function to render the content of the button based on the open state.
+- buttonContainerClassName?: string; - Class name for the button container.
+- buttonClassName?: string; - Class name for the button itself.
+
+---
+
+### Input Props
+- disableSearch?: boolean; - Disables the search input if set to true.
+- inputPlaceholder?: string; - Placeholder text for the search input.
+- inputClassName?: string; - Class name for the search input.
+- inputIcon?: React.ReactNode; - Icon to be displayed in the search input.
+- inputContainerClassName?: string; - Class name for the search input container.
+
+---
+
+### Options Props
+- keyExtractor: (option: TDropdownOption) => string; - Function to extract the key from each option.
+- optionsContainerClassName?: string; - Class name for the options container.
+- queryArray: string[]; - Array of strings to be used for querying the options.
+- sortByKey: string; - Key to sort the options by.
+- firstItem?: (optionValue: string) => boolean; - Function to determine if an option should be the first item.
+- renderItem?: ({ value, selected }: { value: string; selected: boolean }) => React.ReactNode; - Function to render each option.
+- loader?: React.ReactNode; - Loader element to be displayed while options are being loaded.
+- disableSorting?: boolean; - Disables sorting of the options if set to true.
+
+---
+
+These properties offer extensive control over the dropdown's behavior and presentation, making it a highly versatile component suitable for various scenarios.

packages/ui/src/dropdown/common/button.tsx

@@ -0,0 +1,38 @@
+import React, { Fragment } from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// helper
+import { cn } from "../../../helpers";
+import { IMultiSelectDropdownButton, ISingleSelectDropdownButton } from "../dropdown";
+
+export const DropdownButton: React.FC<IMultiSelectDropdownButton | ISingleSelectDropdownButton> = (props) => {
+  const {
+    isOpen,
+    buttonContent,
+    buttonClassName,
+    buttonContainerClassName,
+    handleOnClick,
+    value,
+    setReferenceElement,
+    disabled,
+  } = props;
+  return (
+    <Combobox.Button as={Fragment}>
+      <button
+        ref={setReferenceElement}
+        type="button"
+        className={cn(
+          "clickable block h-full max-w-full outline-none",
+          {
+            "cursor-not-allowed text-custom-text-200": disabled,
+            "cursor-pointer": !disabled,
+          },
+          buttonContainerClassName
+        )}
+        onClick={handleOnClick}
+      >
+        {buttonContent ? <>{buttonContent(isOpen)}</> : <span className={cn("", buttonClassName)}>{value}</span>}
+      </button>
+    </Combobox.Button>
+  );
+};

packages/ui/src/dropdown/common/index.ts

@@ -0,0 +1,4 @@
+export * from "./input-search";
+export * from "./button";
+export * from "./options";
+export * from "./loader";

packages/ui/src/dropdown/common/input-search.tsx

@@ -0,0 +1,58 @@
+import React, { FC, useEffect, useRef } from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Search } from "lucide-react";
+// helpers
+import { cn } from "../../../helpers";
+
+interface IInputSearch {
+  isOpen: boolean;
+  query: string;
+  updateQuery: (query: string) => void;
+  inputIcon?: React.ReactNode;
+  inputContainerClassName?: string;
+  inputClassName?: string;
+  inputPlaceholder?: string;
+}
+
+export const InputSearch: FC<IInputSearch> = (props) => {
+  const { isOpen, query, updateQuery, inputIcon, inputContainerClassName, inputClassName, inputPlaceholder } = props;
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      updateQuery("");
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current && inputRef.current.focus();
+    }
+  }, [isOpen]);
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2",
+        inputContainerClassName
+      )}
+    >
+      {inputIcon ? <>{inputIcon}</> : <Search className="h-4 w-4 text-custom-text-300" aria-hidden="true" />}
+      <Combobox.Input
+        as="input"
+        ref={inputRef}
+        className={cn(
+          "w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none",
+          inputClassName
+        )}
+        value={query}
+        onChange={(e) => updateQuery(e.target.value)}
+        placeholder={inputPlaceholder ?? "Search"}
+        onKeyDown={searchInputKeyDown}
+      />
+    </div>
+  );
+};

packages/ui/src/dropdown/common/loader.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const DropdownOptionsLoader = () => (
+  <div className="flex flex-col gap-1 animate-pulse">
+    {Array.from({ length: 6 }, (_, i) => (
+      <div key={i} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
+    ))}
+  </div>
+);

packages/ui/src/dropdown/common/options.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Check } from "lucide-react";
+// components
+import { DropdownOptionsLoader, InputSearch } from ".";
+// helpers
+import { cn } from "../../../helpers";
+// types
+import { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "../dropdown";
+
+export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSelectDropdownOptions> = (props) => {
+  const {
+    isOpen,
+    query,
+    setQuery,
+    inputIcon,
+    inputPlaceholder,
+    inputClassName,
+    inputContainerClassName,
+    disableSearch,
+    keyExtractor,
+    options,
+    value,
+    renderItem,
+    loader,
+  } = props;
+  return (
+    <>
+      {!disableSearch && (
+        <InputSearch
+          isOpen={isOpen}
+          query={query}
+          updateQuery={(query) => setQuery(query)}
+          inputIcon={inputIcon}
+          inputPlaceholder={inputPlaceholder}
+          inputClassName={inputClassName}
+          inputContainerClassName={inputContainerClassName}
+        />
+      )}
+      <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+        <>
+          {options ? (
+            options.length > 0 ? (
+              options?.map((option) => (
+                <Combobox.Option
+                  key={keyExtractor(option)}
+                  value={option.data[option.value]}
+                  className={({ active, selected }) =>
+                    cn(
+                      "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                      {
+                        "bg-custom-background-80": active,
+                        "text-custom-text-100": selected,
+                        "text-custom-text-200": !selected,
+                      },
+                      option.className && option.className({ active, selected })
+                    )
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      {renderItem ? (
+                        <>{renderItem({ value: option.data[option.value], selected })}</>
+                      ) : (
+                        <>
+                          <span className="flex-grow truncate">{value}</span>
+                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                        </>
+                      )}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 italic text-custom-text-400">No matching results</p>
+            )
+          ) : loader ? (
+            <> {loader} </>
+          ) : (
+            <DropdownOptionsLoader />
+          )}
+        </>
+      </div>
+    </>
+  );
+};

packages/ui/src/dropdown/dropdown.d.ts

@@ -0,0 +1,94 @@
+import { Placement } from "@popperjs/core";
+
+export interface IDropdown {
+  // root props
+  onOpen?: () => void;
+  onClose?: () => void;
+  containerClassName?: (isOpen: boolean) => string;
+  tabIndex?: number;
+  placement?: Placement;
+  disabled?: boolean;
+
+  // button props
+  buttonContent?: (isOpen: boolean) => React.ReactNode;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+
+  // input props
+  disableSearch?: boolean;
+  inputPlaceholder?: string;
+  inputClassName?: string;
+  inputIcon?: React.ReactNode;
+  inputContainerClassName?: string;
+
+  // options props
+  keyExtractor: (option: TDropdownOption) => string;
+  optionsContainerClassName?: string;
+  queryArray: string[];
+  sortByKey: string;
+  firstItem?: (optionValue: string) => boolean;
+  renderItem?: ({ value, selected }: { value: string; selected: boolean }) => React.ReactNode;
+  loader?: React.ReactNode;
+  disableSorting?: boolean;
+}
+
+export interface TDropdownOption {
+  data: any;
+  value: string;
+  className?: ({ active, selected }: { active: boolean; selected: boolean }) => string;
+}
+
+export interface IMultiSelectDropdown extends IDropdown {
+  value: string[];
+  onChange: (value: string[]) => void;
+  options: TDropdownOption[] | undefined;
+}
+
+export interface ISingleSelectDropdown extends IDropdown {
+  value: string;
+  onChange: (value: string) => void;
+  options: TDropdownOption[] | undefined;
+}
+
+export interface IDropdownButton {
+  isOpen: boolean;
+  buttonContent?: (isOpen: boolean) => React.ReactNode;
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  handleOnClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  setReferenceElement: (element: HTMLButtonElement | null) => void;
+  disabled?: boolean;
+}
+
+export interface IMultiSelectDropdownButton extends IDropdownButton {
+  value: string[];
+}
+
+export interface ISingleSelectDropdownButton extends IDropdownButton {
+  value: string;
+}
+
+export interface IDropdownOptions {
+  isOpen: boolean;
+  query: string;
+  setQuery: (query: string) => void;
+
+  inputPlaceholder?: string;
+  inputClassName?: string;
+  inputIcon?: React.ReactNode;
+  inputContainerClassName?: string;
+  disableSearch?: boolean;
+
+  keyExtractor: (option: TDropdownOption) => string;
+  renderItem: (({ value, selected }: { value: string; selected: boolean }) => React.ReactNode) | undefined;
+  options: TDropdownOption[] | undefined;
+  loader?: React.ReactNode;
+}
+
+export interface IMultiSelectDropdownOptions extends IDropdownOptions {
+  value: string[];
+}
+
+export interface ISingleSelectDropdownOptions extends IDropdownOptions {
+  value: string;
+}

packages/ui/src/dropdown/index.ts

@@ -0,0 +1,3 @@
+export * from "./common";
+export * from "./multi-select";
+export * from "./single-select";

packages/ui/src/dropdown/multi-select.tsx

@@ -0,0 +1,167 @@
+import React, { FC, useMemo, useRef, useState } from "react";
+import sortBy from "lodash/sortBy";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// popper-js
+import { usePopper } from "react-popper";
+// components
+import { DropdownButton } from "./common";
+import { DropdownOptions } from "./common/options";
+// hooks
+import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
+import useOutsideClickDetector from "../hooks/use-outside-click-detector";
+// helper
+import { cn } from "../../helpers";
+// types
+import { IMultiSelectDropdown } from "./dropdown";
+
+export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
+  const {
+    value,
+    onChange,
+    options,
+    onOpen,
+    onClose,
+    containerClassName,
+    tabIndex,
+    placement,
+    disabled,
+    buttonContent,
+    buttonContainerClassName,
+    buttonClassName,
+    disableSearch,
+    inputPlaceholder,
+    inputClassName,
+    inputIcon,
+    inputContainerClassName,
+    keyExtractor,
+    optionsContainerClassName,
+    queryArray,
+    sortByKey,
+    firstItem,
+    renderItem,
+    loader = false,
+    disableSorting,
+  } = props;
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  // handlers
+  const toggleDropdown = () => {
+    if (!isOpen) onOpen?.();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose?.();
+  };
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose?.();
+    setQuery?.("");
+  };
+
+  // options
+  const sortedOptions = useMemo(() => {
+    if (!options) return undefined;
+
+    const filteredOptions = (options || []).filter((options) => {
+      const queryString = queryArray.map((query) => options.data[query]).join(" ");
+      return queryString.toLowerCase().includes(query.toLowerCase());
+    });
+
+    if (disableSorting) return filteredOptions;
+
+    return sortBy(filteredOptions, [
+      (option) => firstItem && firstItem(option.data[option.value]),
+      (option) => !(value ?? []).includes(option.data[option.value]),
+      () => sortByKey && sortByKey.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, options]);
+
+  // hooks
+  const handleKeyDown = useDropdownKeyPressed(toggleDropdown, handleClose);
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  return (
+    <Combobox
+      as="div"
+      ref={dropdownRef}
+      value={value}
+      onChange={onChange}
+      className={cn("h-full", containerClassName)}
+      tabIndex={tabIndex}
+      multiple
+      onKeyDown={handleKeyDown}
+      disabled={disabled}
+    >
+      <DropdownButton
+        value={value}
+        isOpen={isOpen}
+        setReferenceElement={setReferenceElement}
+        handleOnClick={handleOnClick}
+        buttonContent={buttonContent}
+        buttonClassName={buttonClassName}
+        buttonContainerClassName={buttonContainerClassName}
+        disabled={disabled}
+      />
+
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className={cn(
+              "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none",
+              optionsContainerClassName
+            )}
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <DropdownOptions
+              isOpen={isOpen}
+              query={query}
+              setQuery={setQuery}
+              inputIcon={inputIcon}
+              inputPlaceholder={inputPlaceholder}
+              inputClassName={inputClassName}
+              inputContainerClassName={inputContainerClassName}
+              disableSearch={disableSearch}
+              keyExtractor={keyExtractor}
+              options={sortedOptions}
+              value={value}
+              renderItem={renderItem}
+              loader={loader}
+            />
+          </div>
+        </Combobox.Options>
+      )}
+    </Combobox>
+  );
+};

packages/ui/src/dropdown/single-select.tsx

@@ -0,0 +1,166 @@
+import React, { FC, useMemo, useRef, useState } from "react";
+import sortBy from "lodash/sortBy";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// popper-js
+import { usePopper } from "react-popper";
+// components
+import { DropdownButton } from "./common";
+import { DropdownOptions } from "./common/options";
+// hooks
+import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
+import useOutsideClickDetector from "../hooks/use-outside-click-detector";
+// helper
+import { cn } from "../../helpers";
+// types
+import { ISingleSelectDropdown } from "./dropdown";
+
+export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
+  const {
+    value,
+    onChange,
+    options,
+    onOpen,
+    onClose,
+    containerClassName,
+    tabIndex,
+    placement,
+    disabled,
+    buttonContent,
+    buttonContainerClassName,
+    buttonClassName,
+    disableSearch,
+    inputPlaceholder,
+    inputClassName,
+    inputIcon,
+    inputContainerClassName,
+    keyExtractor,
+    optionsContainerClassName,
+    queryArray,
+    sortByKey,
+    firstItem,
+    renderItem,
+    loader = false,
+    disableSorting,
+  } = props;
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  // handlers
+  const toggleDropdown = () => {
+    if (!isOpen) onOpen?.();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose?.();
+  };
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose?.();
+    setQuery?.("");
+  };
+
+  // options
+  const sortedOptions = useMemo(() => {
+    if (!options) return undefined;
+
+    const filteredOptions = (options || []).filter((options) => {
+      const queryString = queryArray.map((query) => options.data[query]).join(" ");
+      return queryString.toLowerCase().includes(query.toLowerCase());
+    });
+
+    if (disableSorting) return filteredOptions;
+
+    return sortBy(filteredOptions, [
+      (option) => firstItem && firstItem(option.data[option.value]),
+      (option) => !(value ?? []).includes(option.data[option.value]),
+      () => sortByKey && sortByKey.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, options]);
+
+  // hooks
+  const handleKeyDown = useDropdownKeyPressed(toggleDropdown, handleClose);
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  return (
+    <Combobox
+      as="div"
+      ref={dropdownRef}
+      value={value}
+      onChange={onChange}
+      className={cn("h-full", containerClassName)}
+      tabIndex={tabIndex}
+      onKeyDown={handleKeyDown}
+      disabled={disabled}
+    >
+      <DropdownButton
+        value={value}
+        isOpen={isOpen}
+        setReferenceElement={setReferenceElement}
+        handleOnClick={handleOnClick}
+        buttonContent={buttonContent}
+        buttonClassName={buttonClassName}
+        buttonContainerClassName={buttonContainerClassName}
+        disabled={disabled}
+      />
+
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className={cn(
+              "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none",
+              optionsContainerClassName
+            )}
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <DropdownOptions
+              isOpen={isOpen}
+              query={query}
+              setQuery={setQuery}
+              inputIcon={inputIcon}
+              inputPlaceholder={inputPlaceholder}
+              inputClassName={inputClassName}
+              inputContainerClassName={inputContainerClassName}
+              disableSearch={disableSearch}
+              keyExtractor={keyExtractor}
+              options={sortedOptions}
+              value={value}
+              renderItem={renderItem}
+              loader={loader}
+            />
+          </div>
+        </Combobox.Options>
+      )}
+    </Combobox>
+  );
+};

packages/ui/src/hooks/use-dropdown-key-pressed.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+
+type TUseDropdownKeyPressed = {
+  (
+    onEnterKeyDown: () => void,
+    onEscKeyDown: () => void,
+    stopPropagation?: boolean
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
+};
+
+export const useDropdownKeyPressed: TUseDropdownKeyPressed = (onEnterKeyDown, onEscKeyDown, stopPropagation = true) => {
+  const stopEventPropagation = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [stopPropagation]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key === "Enter") {
+        stopEventPropagation(event);
+        onEnterKeyDown();
+      } else if (event.key === "Escape") {
+        stopEventPropagation(event);
+        onEscKeyDown();
+      } else if (event.key === "Tab") onEscKeyDown();
+    },
+    [onEnterKeyDown, onEscKeyDown, stopEventPropagation]
+  );
+
+  return handleKeyDown;
+};

packages/ui/src/index.ts

@@ -4,6 +4,7 @@ export * from "./badge";
 export * from "./button";
 export * from "./emoji";
 export * from "./dropdowns";
+export * from "./dropdown";
 export * from "./form-fields";
 export * from "./icons";
 export * from "./progress";