@xqmsg/ui-core 0.15.2 → 0.15.3

package/dist/hooks/useOnOutsideClick.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useOnClickOutside(ref: RefObject<any>, handler: () => void): void;

package/dist/ui-core.cjs.development.js

@@ -531,7 +531,7 @@ var Dropdown = function Dropdown(_ref) {
         fontSize: "13px",
         px: "8px",
         py: "4px",
-        width: "fit-content",
+        width: "100%",
         color: colors.label.primary.light,
         _hover: {
           color: colors.label.primary.dark,
@@ -576,6 +576,32 @@ var useDidMountEffect = function useDidMountEffect(func, deps) {
   }, deps);
 };
 
+function useOnClickOutside(ref, handler) {
+  React.useEffect(function () {
+    var listener = function listener(event) {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, // Add ref and handler to effect dependencies
+  // It's worth noting that because passed in handler is a new ...
+  // ... function on every render that will cause this effect ...
+  // ... callback/cleanup to run every render. It's not a big deal ...
+  // ... but to optimize you can wrap handler in useCallback before ...
+  // ... passing it into this hook.
+  [ref, handler]);
+}
+
 var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "value"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
@@ -628,11 +654,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       return option.value === value;
     })) == null ? void 0 : _options$find2.label) != null ? _options$find$label2 : '');
   }, [value]);
-  react.useOutsideClick({
-    ref: dropdownRef,
-    handler: function handler() {
-      return setIsFocussed(false);
-    }
+  useOnClickOutside(dropdownRef, function () {
+    return setIsFocussed(false);
   });
 
   var handleOnSelectItem = function handleOnSelectItem(option) {
@@ -812,11 +835,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setPosition('bottom');
     }
   }, [boundingClientRect]);
-  react.useOutsideClick({
-    ref: dropdownRef,
-    handler: function handler() {
-      return setIsFocussed(false);
-    }
+  useOnClickOutside(dropdownRef, function () {
+    return setIsFocussed(false);
   }); // gets latest watched form value (common delimited) from RHF state and creates a list
 
   React.useEffect(function () {