@basic-ui/core 0.0.36 → 0.0.39

package/src/hooks/useAutoFocus.ts

@@ -1,12 +1,20 @@
 import { useEffect } from 'react';
 
+import { focusOnChildNode } from '../FocusLock/tabUtils';
+
 export function useAutoFocus(
   open: boolean,
   elementRef: React.MutableRefObject<HTMLElement | null>
 ) {
   useEffect(() => {
     if (open) {
-      elementRef.current && elementRef.current.focus();
+      // We will only autoFocus on the first child if the currently active element isn't already trapped inside the modal
+      if (
+        elementRef.current &&
+        !elementRef.current.contains(document.activeElement)
+      ) {
+        focusOnChildNode(elementRef.current, 0);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);

package/src/hooks/useChildrenCounter.ts

@@ -1,4 +1,5 @@
-import { MutableRefObject, useEffect } from 'react';
+import type { MutableRefObject } from 'react';
+import { useEffect } from 'react';
 
 export function useChildrenCounterParent<T>(
   itemsRef: MutableRefObject<T[] & { isNewRender?: boolean }>

package/src/hooks/useControlledState.ts

@@ -1,5 +1,7 @@
 import { useRef, useState } from 'react';
-import { wrapEvent, CustomEventHandler } from '../utils';
+
+import type { CustomEventHandler } from '../utils';
+import { wrapEvent } from '../utils';
 
 export function useControlledState<
   V,

package/src/hooks/useFocusReturn.ts

@@ -1,23 +1,43 @@
+import type { MutableRefObject } from 'react';
 import { useEffect, useRef } from 'react';
 
-export function useFocusReturn(open: boolean) {
-  const previousFocusRef = useRef<Element | null>(null);
+export function useFocusReturn(
+  open: boolean,
+  rootEl: MutableRefObject<HTMLElement | null>
+) {
+  const previousFocusRef = useRef<HTMLElement | null>(
+    (() => {
+      if (
+        open &&
+        typeof document !== 'undefined' &&
+        document.activeElement instanceof HTMLElement
+      ) {
+        return document.activeElement;
+      }
+      return null;
+    })()
+  );
 
   useEffect(() => {
     if (open) {
       // once opened, keep track of the element that triggered
       // the Modal opening
-      previousFocusRef.current = document.activeElement;
-    }
+      if (
+        !previousFocusRef.current &&
+        document.activeElement instanceof HTMLElement &&
+        !rootEl.current?.contains(document.activeElement)
+      ) {
+        previousFocusRef.current = document.activeElement;
+      }
 
-    return () => {
-      // on unmount, return focus to that element
-      const previousFocus = previousFocusRef.current;
-      requestAnimationFrame(() => {
-        if (previousFocus) {
-          (previousFocus as HTMLElement).focus();
+      const rootElement = rootEl.current;
+      const previousElement = previousFocusRef.current;
+      return () => {
+        // on unmount, return focus to that element
+        if (previousElement && !rootElement?.contains(document.activeElement)) {
+          previousElement.focus({ preventScroll: true });
         }
-      });
-    };
-  }, [open]);
+      };
+    }
+  }, [open, rootEl]);
 }

package/src/hooks/useFocusState.ts

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { wrapEvent } from '../utils/wrapEvent';
 
 export function useFocusState<T>(

package/src/hooks/useReducerMachine.ts

@@ -1,4 +1,5 @@
-import { useReducer, Reducer } from 'react';
+import type { Reducer } from 'react';
+import { useReducer } from 'react';
 
 export interface StateChart<STypes extends string, ATypes extends string> {
   initial: STypes;

package/src/hooks/useRemoveBodyScroll.ts

@@ -1,37 +1,29 @@
 import { useEffect } from 'react';
 
+let scrollBodyCount = 0;
 export function useRemoveBodyScroll(open: boolean) {
   useEffect(() => {
     if (open) {
-      const locksCount = ((window as any).__SCROLL_BODY_COUNT__ || 0) + 1;
+      scrollBodyCount += 1;
 
       // calculate scrollbar width if mounting the first scroll lock
       let scrollBarWidth = 0;
-      if (locksCount === 1) {
+      if (scrollBodyCount === 1) {
         scrollBarWidth = window.innerWidth - document.body.clientWidth;
       }
 
       document.body.style.overflow = 'hidden';
       if (scrollBarWidth > 0) {
-        document.body.style.paddingRight = `${scrollBarWidth}px`;
+        document.body.style.marginRight = `${scrollBarWidth}px`;
       }
 
-      // save current lock count in global object
-      (window as any).__SCROLL_BODY_COUNT__ = locksCount;
-    }
-
-    return () => {
-      if (open) {
-        const locksCount = (window as any).__SCROLL_BODY_COUNT__ - 1;
-
-        if (locksCount === 0) {
+      return () => {
+        scrollBodyCount -= 1;
+        if (scrollBodyCount === 0) {
           document.body.style.overflow = '';
-          document.body.style.paddingRight = '';
+          document.body.style.marginRight = '';
         }
-
-        // save current lock count in global object
-        (window as any).__SCROLL_BODY_COUNT__ = locksCount;
-      }
-    };
+      };
+    }
   }, [open]);
 }

package/src/hooks/useScope.ts

@@ -1,4 +1,5 @@
-import { useRef, MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
+import { useRef } from 'react';
 
 export type ScopeMatcherFn = (
   nodeType: string,

package/src/utils/assignRef.ts

@@ -1,4 +1,4 @@
-import { LegacyRef, MutableRefObject, Ref, RefCallback } from 'react';
+import type { LegacyRef, MutableRefObject, Ref, RefCallback } from 'react';
 
 export function assignRef<T>(
   ref: LegacyRef<T> | MutableRefObject<T> | Ref<T> | null | undefined,

package/build/esm/hooks/useId.d.ts

@@ -1,3 +0,0 @@
-export declare function useId(): string | undefined;
-export declare function useId(preferredId: string): string;
-export declare function useId(preferredId: string | undefined): string | undefined;

package/build/esm/hooks/useId.js

@@ -1,16 +0,0 @@
-import { useEffect, useState } from 'react'; // Could use UUID but if we hit 9,007,199,254,740,991 unique components over
-// the lifetime of the app before it gets reloaded, I mean ... come on.
-// I don't even know what xillion that is.
-// /me googles
-// Oh duh, quadrillion. Nine quadrillion components. I think we're okay.
-
-let id = 0;
-
-const genId = () => "".concat(++id);
-
-export function useId(preferredId) {
-  const [id, setId] = useState(preferredId);
-  useEffect(() => setId(genId()), []);
-  return id;
-}
-//# sourceMappingURL=useId.js.map

package/build/esm/hooks/useId.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/hooks/useId.ts"],"names":["useEffect","useState","id","genId","useId","preferredId","setId"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC,C,CAEA;AACA;AACA;AACA;AACA;;AACA,IAAIC,EAAE,GAAG,CAAT;;AACA,MAAMC,KAAK,GAAG,gBAAS,EAAED,EAAX,CAAd;;AAKA,OAAO,SAASE,KAAT,CAAeC,WAAf,EAAyD;AAC9D,QAAM,CAACH,EAAD,EAAKI,KAAL,IAAcL,QAAQ,CAAqBI,WAArB,CAA5B;AACAL,EAAAA,SAAS,CAAC,MAAMM,KAAK,CAACH,KAAK,EAAN,CAAZ,EAAuB,EAAvB,CAAT;AACA,SAAOD,EAAP;AACD","sourcesContent":["import { useEffect, useState } from 'react';\n\n// Could use UUID but if we hit 9,007,199,254,740,991 unique components over\n// the lifetime of the app before it gets reloaded, I mean ... come on.\n// I don't even know what xillion that is.\n// /me googles\n// Oh duh, quadrillion. Nine quadrillion components. I think we're okay.\nlet id = 0;\nconst genId = () => `${++id}`;\n\nexport function useId(): string | undefined;\nexport function useId(preferredId: string): string;\nexport function useId(preferredId: string | undefined): string | undefined;\nexport function useId(preferredId?: string): string | undefined {\n  const [id, setId] = useState<string | undefined>(preferredId);\n  useEffect(() => setId(genId()), []);\n  return id;\n}\n"],"file":"useId.js"}

package/src/hooks/useId.ts

@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react';
-
-// Could use UUID but if we hit 9,007,199,254,740,991 unique components over
-// the lifetime of the app before it gets reloaded, I mean ... come on.
-// I don't even know what xillion that is.
-// /me googles
-// Oh duh, quadrillion. Nine quadrillion components. I think we're okay.
-let id = 0;
-const genId = () => `${++id}`;
-
-export function useId(): string | undefined;
-export function useId(preferredId: string): string;
-export function useId(preferredId: string | undefined): string | undefined;
-export function useId(preferredId?: string): string | undefined {
-  const [id, setId] = useState<string | undefined>(preferredId);
-  useEffect(() => setId(genId()), []);
-  return id;
-}