@xqmsg/ui-core 0.15.2 → 0.15.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.2",
+  "version": "0.15.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/input/StackedMultiSelect/index.tsx

@@ -1,12 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import {
-  Box,
-  Flex,
-  Text,
-  Image,
-  useOutsideClick,
-  Input,
-} from '@chakra-ui/react';
+import { Box, Flex, Text, Image, Input } from '@chakra-ui/react';
 import {
   FieldOption,
   FieldOptions,
@@ -24,6 +17,7 @@ import {
 import SubtractIcon from '../StackedSelect/assets/svg/subtract.svg';
 import { Dropdown } from '../components/dropdown';
 import Token from '../components/token';
+import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 
 export interface StackedMultiSelectProps extends ReactSelectFieldProps {
   options: FieldOptions;
@@ -62,10 +56,7 @@ const StackedMultiSelect = React.forwardRef<
     }
   }, [boundingClientRect]);
 
-  useOutsideClick({
-    ref: dropdownRef,
-    handler: () => setIsFocussed(false),
-  });
+  useOnClickOutside(dropdownRef, () => setIsFocussed(false));
 
   // gets latest watched form value (common delimited) from RHF state and creates a list
   useEffect(() => {

package/src/components/input/StackedSelect/StackedSelect.tsx

@@ -5,7 +5,6 @@ import {
   Input,
   InputGroup,
   InputRightElement,
-  useOutsideClick,
 } from '@chakra-ui/react';
 import { FieldOptions } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
@@ -14,6 +13,7 @@ import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 import SubtractIcon from './assets/svg/subtract.svg';
 import { Dropdown } from '../components/dropdown';
 import useDidMountEffect from '../../../hooks/useDidMountEffect';
+import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 
 export interface StackedSelectProps extends StackedInputProps {
   options: FieldOptions;
@@ -57,7 +57,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       );
     }, [value]);
 
-    useOutsideClick({ ref: dropdownRef, handler: () => setIsFocussed(false) });
+    useOnClickOutside(dropdownRef, () => setIsFocussed(false));
 
     const handleOnSelectItem = (option: {
       label: string;

package/src/components/input/components/dropdown/index.tsx

@@ -54,7 +54,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             fontSize="13px"
             px="8px"
             py="4px"
-            width="fit-content"
+            width="100%"
             color={colors.label.primary.light}
             _hover={{
               color: colors.label.primary.dark,

package/src/hooks/useOnOutsideClick.tsx

@@ -0,0 +1,31 @@
+import { RefObject, useEffect } from 'react';
+
+export function useOnClickOutside(ref: RefObject<any>, handler: () => void) {
+  useEffect(
+    () => {
+      const listener: EventListener = 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 () => {
+        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]
+  );
+}