chore: components restructuring and UI improvements. (#5285)

* chore: components restructuring and minor UI improvements.

* chore: minor UI improvements fro icons and member dropdown.

* chore: update issue identifier.

* chore: rename `Issue Extra Property` to `Issue Additional Property`

* chore: fix popovers placement issue on components with overflow.

* chore: add `scrollbar-xs`

* chore: add `xs` size for input and textarea components.

* chore: update `sortable` to return back `movedItem` in the onChange callback.

* chore: minor UI adjustments for radio-select.

* chore: update outside click delay to 1ms.

packages/ui/src/hooks/use-outside-click-detector.tsx

@@ -1,8 +1,31 @@
 import React, { useEffect } from "react";
 
+// TODO: move it to helpers package
 const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
   const handleClick = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as Node)) {
+      // get all the element with attribute name data-prevent-outside-click
+      const preventOutsideClickElements = document.querySelectorAll("[data-prevent-outside-click]");
+      // check if the click target is any of the elements with attribute name data-prevent-outside-click
+      for (let i = 0; i < preventOutsideClickElements.length; i++) {
+        if (preventOutsideClickElements[i].contains(event.target as Node)) {
+          // if the click target is any of the elements with attribute name data-prevent-outside-click, return
+          return;
+        }
+      }
+      // get all the element with attribute name data-delay-outside-click
+      const delayOutsideClickElements = document.querySelectorAll("[data-delay-outside-click]");
+      // check if the click target is any of the elements with attribute name data-delay-outside-click
+      for (let i = 0; i < delayOutsideClickElements.length; i++) {
+        if (delayOutsideClickElements[i].contains(event.target as Node)) {
+          // if the click target is any of the elements with attribute name data-delay-outside-click, delay the callback
+          setTimeout(() => {
+            callback();
+          }, 1);
+          return;
+        }
+      }
+      // else, call the callback immediately
       callback();
     }
   };