@basic-ui/core 0.0.37 → 0.0.40

package/src/Modal/NavDrawer.story.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useSpring, animated } from 'react-spring';
+
 import { Modal, ModalBackdrop } from './';
 import { Portal } from '../Portal';
 import './styles.css';
@@ -65,9 +66,8 @@ const Wrapper = ({ children }) => {
 
 const SimpleModalControlledAnimated = () => {
   const [open, setOpen] = useState(false);
-  const [pointerEvents, setPointerEvents] = useState<PointerEventsProperty>(
-    'none'
-  );
+  const [pointerEvents, setPointerEvents] =
+    useState<PointerEventsProperty>('none');
   const [{ transformX, opacity }, set] = useSpring(() => ({
     transformX: -120,
     opacity: 0,

package/src/Popper/Popper.story.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState, useEffect } from 'react';
 import { useSpring, animated } from 'react-spring';
+
 import { Popper } from './Popper';
 import { PopperArrow } from './PopperArrow';
 import './styles.css';
@@ -160,9 +161,7 @@ function Menu() {
   );
 }
 
-const PopperFixedExample = ({ showAll = false, showArrow = false }) => {
-  const ref = useRef<any>(null);
-
+const PopperFixedExample = () => {
   return (
     <>
       <div
@@ -259,6 +258,6 @@ export const AllPointsWithArrow = () => (
   <PopperExample showAll={true} showArrow={true} />
 );
 
-export const FixedPopperAllPoints = () => <PopperFixedExample showAll={true} />;
+export const FixedPopperAllPoints = () => <PopperFixedExample />;
 export const RerenderingPopper = () => <RerenderingPopperExample />;
 export const JumpingPopper = () => <JumpingPopperExample />;

package/src/Popper/Popper.tsx

@@ -6,22 +6,23 @@ import {
   useMemo,
   memo,
 } from 'react';
-import type * as React from 'react';
-import { assignMultipleRefs } from '../utils/assignRef';
-import { PopperProvider, PopperContextProps } from './context';
-import { Portal } from '../Portal';
-
-import {
+import * as React from 'react';
+import type {
   Placement,
   Modifier,
   PositioningStrategy,
   Instance,
   Rect,
-  createPopper,
 } from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
 import type { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';
 import type { ArrowModifier } from '@popperjs/core/lib/modifiers/arrow';
 
+import { assignMultipleRefs } from '../utils/assignRef';
+import type { PopperContextProps } from './context';
+import { PopperProvider } from './context';
+import { Portal } from '../Portal';
+
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
@@ -123,6 +124,10 @@ export const Popper = memo(
       };
     }, [anchorEl, modifiers, placement, strategy, defaultModifiers]);
 
+    useEnhancedEffect(() => {
+      popperEngineInstance.current?.forceUpdate();
+    }, [props.hidden || props['aria-hidden']]);
+
     const contextValue: PopperContextProps = {
       arrowRef,
     };

package/src/Popper/PopperArrow.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { usePopperContext } from './context';
 import { assignRef } from '../utils/assignRef';
 

package/src/Popper/context.ts

@@ -1,4 +1,5 @@
-import { createContext, MutableRefObject, useContext } from 'react';
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
 
 export interface PopperContextProps {
   arrowRef: MutableRefObject<HTMLSpanElement | null>;

package/src/Portal/Portal.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 export interface PortalProps {

package/src/RadioButton/RadioButton.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { RadioButton, RadioGroup } from './';
 // import './styles.css';
 

package/src/RadioButton/RadioButton.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { RadioValue, useRadioGroupContext } from './context';
+import * as React from 'react';
+
+import type { RadioValue } from './context';
+import { useRadioGroupContext } from './context';
 import { wrapEvent } from '../utils';
 
 export interface RadioButtonProps

package/src/RadioButton/RadioGroup.tsx

@@ -1,7 +1,9 @@
-import { forwardRef } from 'react';
-import type * as React from 'react';
-import { RadioGroupProvider, RadioValue } from './context';
-import { useControlledState, useId } from '../hooks';
+import { forwardRef, useId } from 'react';
+import * as React from 'react';
+
+import type { RadioValue } from './context';
+import { RadioGroupProvider } from './context';
+import { useControlledState } from '../hooks';
 
 export interface RadioGroupProps
   extends Omit<

package/src/SkipNav/SkipNav.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 
 export interface SkipNavProps extends React.HTMLAttributes<HTMLDivElement> {
   as?: React.ElementType<any>;

package/src/Spinner/Spinner.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Spinner, SpinnerButton } from './';
 import './styles.css';
 

package/src/Spinner/Spinner.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useState, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { SpinnerProvider } from './context';
 import { clamp as clampFunc } from '../utils/clamp';
 import { wrapEvent, assignMultipleRefs } from '../utils';

package/src/Spinner/SpinnerButton.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useSpinnerContext } from './context';
 import { wrapEvent } from '../utils';
 

package/src/Tabs/Tab.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Tab, TabPanel, TabPanels, Tabs, TabList } from './';
 import './styles.css';
 

package/src/Tabs/Tab.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useTabsContext, useTabListContext } from './context';
 import { assignMultipleRefs, getCircularIndex, wrapEvent } from '../utils';
 import { scopeQuery } from './scopeQuery';
@@ -59,9 +60,8 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
     const navigateIndex = (desiredIndex: number, isLast: boolean) => {
       const delta = e.key === right || e.key === first ? 1 : -1;
 
-      const allTabs = tabListContext.tabsScope.current.queryAllNodes(
-        scopeQuery
-      );
+      const allTabs =
+        tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
       const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
 
       const nextIndex = getNextIndex(

package/src/Tabs/TabList.tsx

@@ -1,7 +1,15 @@
-import { forwardRef, useRef, useEffect, Children, cloneElement } from 'react';
-import type * as React from 'react';
+import {
+  forwardRef,
+  useRef,
+  useEffect,
+  Children,
+  cloneElement,
+  useId,
+} from 'react';
+import * as React from 'react';
+
 import { TabListProvider, useTabsContext } from './context';
-import { useScope, useId } from '../hooks';
+import { useScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/Tabs/TabPanel.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useTabsContext } from './context';
 
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/Tabs/TabPanels.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, Fragment, Children, cloneElement } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 
 export interface TabPanelsProps {
   as?: React.ElementType<any>;

package/src/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, Fragment, useState } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { TabsProvider } from './context';
 import { useControlledState } from '../hooks';
 

package/src/Tabs/context.ts

@@ -1,5 +1,6 @@
 import { createContext, useContext } from 'react';
-import { Scope } from '../hooks/useScope';
+
+import type { Scope } from '../hooks/useScope';
 
 // Tabs Component
 export interface TabsContextProps {

package/src/Tooltip/Tooltip.story.tsx

@@ -1,7 +1,8 @@
 import React, { useRef, forwardRef } from 'react';
+
 import { Tooltip } from './';
 import { Popper } from '../Popper/Popper';
-import { InjectedTooltipProps } from './useTooltip';
+import type { InjectedTooltipProps } from './useTooltip';
 import './styles.css';
 
 export default {

package/src/Tooltip/Tooltip.tsx

@@ -1,10 +1,6 @@
-import React, {
-  forwardRef,
-  cloneElement,
-  Children,
-  ReactElement,
-  RefAttributes,
-} from 'react';
+import type { ReactElement, RefAttributes } from 'react';
+import React, { forwardRef, cloneElement, Children } from 'react';
+
 import { useTooltip } from './useTooltip';
 export type { InjectedTooltipProps } from './useTooltip';
 

package/src/Tooltip/stateMachine.ts

@@ -1,5 +1,5 @@
 import { createSubscription } from '../utils/createSubscription';
-import { StateChart as GenericStateChart } from '../hooks/useReducerMachine';
+import type { StateChart as GenericStateChart } from '../hooks/useReducerMachine';
 
 ////////////////////////////////////////////////////////////////////////////////
 // Timeouts:

package/src/Tooltip/useTooltip.ts

@@ -1,7 +1,8 @@
-import { useRef, RefAttributes, useEffect, useState } from 'react';
+import type { RefAttributes } from 'react';
+import { useRef, useEffect, useState, useId } from 'react';
+
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
-import { useId } from '../hooks/useId';
 import {
   send,
   state,
@@ -43,7 +44,7 @@ export function useTooltip(
   } = childProps;
   const anchorEl = useRef<HTMLElement>(null);
   const [visible, setVisible] = useState(false);
-  const id = useId('');
+  const id = useId();
 
   useEffect(() => {
     subscription.subscribe(() => {
@@ -104,7 +105,8 @@ export function useTooltip(
     {
       ...childProps,
       ref: assignMultipleRefs(childRef, anchorEl),
-      ...(visible && { 'aria-describedby': tooltipId }),
+      ...(visible &&
+        !childProps['aria-label'] && { 'aria-describedby': tooltipId }),
       onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
       onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
       onMouseMove: wrapEvent(onMouseMove, handleMouseMove),

package/src/hooks/index.ts

@@ -3,7 +3,6 @@ export * from './useControlledState';
 export * from './useChildrenCounter';
 export * from './useFocusReturn';
 export * from './useFocusState';
-export * from './useId';
 export * from './useOnClickOutside';
 export * from './useOnKeyDown';
 export * from './useReducerMachine';

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/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;
-}