@chekinapp/ui 0.0.30 → 0.0.31

package/dist/index.d.cts

@@ -2564,7 +2564,15 @@ declare function useModalControls(initState?: boolean, { disabled }?: {
     setIsOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
 };
 
-declare function useOutsideClick<T extends Element>(elementRef: RefObject<T> | null, onOutsideClick: ((event?: Event) => void) | null, nested?: string[] | string): void;
+type OutsideClickHandler = (event: Event) => void;
+type UseOutsideClickProps<T extends Element> = {
+    elementRef: RefObject<T> | null;
+    onOutsideClick: OutsideClickHandler | null;
+    triggerRef?: RefObject<Element> | null;
+    isDisabled?: boolean;
+    nested?: string[] | string;
+};
+declare function useOutsideClick<T extends Element>({ elementRef, onOutsideClick, triggerRef, isDisabled, nested, }: UseOutsideClickProps<T>): void;
 
 declare function useScreenResize(maxWidth: string): {
     isMatch: boolean;

package/dist/index.d.ts

@@ -2564,7 +2564,15 @@ declare function useModalControls(initState?: boolean, { disabled }?: {
     setIsOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
 };
 
-declare function useOutsideClick<T extends Element>(elementRef: RefObject<T> | null, onOutsideClick: ((event?: Event) => void) | null, nested?: string[] | string): void;
+type OutsideClickHandler = (event: Event) => void;
+type UseOutsideClickProps<T extends Element> = {
+    elementRef: RefObject<T> | null;
+    onOutsideClick: OutsideClickHandler | null;
+    triggerRef?: RefObject<Element> | null;
+    isDisabled?: boolean;
+    nested?: string[] | string;
+};
+declare function useOutsideClick<T extends Element>({ elementRef, onOutsideClick, triggerRef, isDisabled, nested, }: UseOutsideClickProps<T>): void;
 
 declare function useScreenResize(maxWidth: string): {
     isMatch: boolean;

package/dist/index.js

@@ -2169,18 +2169,25 @@ function useModalControls(initState = false, { disabled } = {}) {
 
 // src/hooks/use-outside-click.ts
 import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef5 } from "react";
-function useOutsideClick(elementRef, onOutsideClick, nested) {
+function useOutsideClick({
+  elementRef,
+  onOutsideClick,
+  triggerRef,
+  isDisabled,
+  nested
+}) {
   const handleOutsideClick = useRef5(onOutsideClick);
   handleOutsideClick.current = onOutsideClick;
   const checkNestedElements = useCallback5(
-    (event) => {
+    (event, ownerDocument) => {
       const checkIsElementClickedBySelector = (selector) => {
-        const nestedElement = getDocument().querySelector(selector);
+        const nestedElement = ownerDocument.querySelector(selector);
         return nestedElement?.contains(event.target);
       };
       const checkDataAttribute = () => {
         const target = event.target;
-        if (!target || !(target instanceof HTMLElement)) {
+        const HTMLElementConstructor = ownerDocument.defaultView?.HTMLElement ?? HTMLElement;
+        if (!target || !(target instanceof HTMLElementConstructor)) {
           return false;
         }
         let current = target;
@@ -2204,19 +2211,29 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
     [nested]
   );
   useEffect8(() => {
+    if (isDisabled || !handleOutsideClick.current) {
+      return;
+    }
+    const ownerDocument = elementRef?.current?.ownerDocument ?? triggerRef?.current?.ownerDocument ?? getDocument();
     function handleClickOutside(event) {
-      const isNestedElement = checkNestedElements(event);
-      if (elementRef?.current && !elementRef.current.contains(event.target) && !isNestedElement) {
+      const target = event.target;
+      const NodeConstructor = ownerDocument.defaultView?.Node ?? Node;
+      if (!target || !(target instanceof NodeConstructor)) {
+        return;
+      }
+      const targetNode = target;
+      const isNestedElement = checkNestedElements(event, ownerDocument);
+      if (elementRef?.current && !elementRef.current.contains(targetNode) && !triggerRef?.current?.contains(targetNode) && !isNestedElement) {
         handleOutsideClick.current?.(event);
       }
     }
-    getDocument().addEventListener("mousedown", handleClickOutside, true);
-    getDocument().addEventListener("touchstart", handleClickOutside, true);
+    ownerDocument.addEventListener("mousedown", handleClickOutside, true);
+    ownerDocument.addEventListener("touchstart", handleClickOutside, true);
     return () => {
-      getDocument().removeEventListener("mousedown", handleClickOutside, true);
-      getDocument().removeEventListener("touchstart", handleClickOutside, true);
+      ownerDocument.removeEventListener("mousedown", handleClickOutside, true);
+      ownerDocument.removeEventListener("touchstart", handleClickOutside, true);
     };
-  }, [checkNestedElements, elementRef]);
+  }, [checkNestedElements, elementRef, isDisabled, triggerRef]);
 }
 
 // src/hooks/use-screen-resize.ts
@@ -11000,7 +11017,11 @@ var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
   const combinedRef = useCombinedRef(ref, desktopTriggerRef);
   const activeMobileIndex = getOptionIndex(options, pendingValue);
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
-  useOutsideClick(containerRef, isOpen && !isMobile ? () => setIsOpen(false) : null);
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: () => setIsOpen(false),
+    isDisabled: !isOpen || isMobile
+  });
   React38.useEffect(() => {
     if (isBlocked) {
       setIsOpen(false);
@@ -11500,7 +11521,11 @@ var SearchableSelectInternal = ({
   const triggerError = error ?? invalid;
   const describedBy = error && !hideErrorMessage ? errorId : void 0;
   const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
-  useOutsideClick(containerRef, open && !isMobile ? () => closeSelect() : null);
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: () => closeSelect(),
+    isDisabled: !open || isMobile
+  });
   const handleOnOpenChange = useEvent(onOpenChange);
   const setSelectOpen = useCallback25(
     (nextOpen, options2) => {