@basic-ui/core 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -15,20 +15,20 @@
   "sideEffects": false,
   "scripts": {
     "build": "run -T concurrently \"yarn:build:*\"",
-    "build:dts": "tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
-    "build:cjs": "rollup -c ../../rollup.config.js",
-    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
-    "build-storybook": "build-storybook -c ../../scripts/storybook -o .out",
-    "storybook": "yarn run -T start-storybook -p 9001 -c ../../scripts/storybook",
-    "start": "yarn run storybook",
-    "serve": "http-server .out",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
-    "typecheck": "tsc --noEmit -p ./tsconfig.json",
-    "test": "jest --config ../../jest.config.js",
+    "build:dts": "run -T tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
+    "build:cjs": "run -T rollup -c ../../rollup.config.js",
+    "build:esm": "run -T cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
+    "build-storybook": "run -T build-storybook -c ../../scripts/storybook -o .out",
+    "storybook": "run -T start-storybook -p 9001 -c ../../scripts/storybook",
+    "start": "run storybook",
+    "serve": "run -T http-server .out",
+    "lint": "run -T eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
+    "typecheck": "run -T tsc --noEmit -p ./tsconfig.json",
+    "test": "run -T jest --config ../../jest.config.js",
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@popperjs/core": "^2.9.2",
+    "@popperjs/core": "^2.11.5",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
@@ -36,5 +36,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "78b668ff80ce86a4672b3f34ca2c1aaaf79c56eb"
+  "gitHead": "f3a2affbe87fb4f5e59f5528f9e3af53fc311120"
 }

package/src/Accordion/AccordionItem.tsx

@@ -1,7 +1,6 @@
-import { Fragment, forwardRef } from 'react';
+import { Fragment, forwardRef, useId } from 'react';
 import type * as React from 'react';
 import { AccordionItemContextProps, AccordionItemProvider } from './context';
-import { useId } from '../hooks';
 
 export interface AccordionItemProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {

package/src/ComboBox/ComboBox.story.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useRef } from 'react';
 import type * as React from 'react';
 import { ComboboxOption } from './ComboboxOption';
 import { ComboboxList } from './ComboboxList';
@@ -6,6 +6,7 @@ import { ComboboxPopover } from './ComboboxPopover';
 import { ComboboxInput } from './ComboboxInput';
 import { ComboboxLabel } from './ComboboxLabel';
 import { Combobox } from './Combobox';
+import { Popper } from '../Popper';
 import cities from './cities';
 import './styles.css';
 

package/src/ComboBox/Combobox.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useMemo } from 'react';
+import { forwardRef, useRef, useMemo, useId } from 'react';
 import type * as React from 'react';
 import {
   stateChart,
@@ -9,7 +9,7 @@ import {
 } from './hooks';
 import { ComboBoxProvider, ComboBoxContextProps } from './context';
 import { useReducerMachine } from '../hooks/useReducerMachine';
-import { useId, Scope, getScope } from '../hooks';
+import { Scope, getScope } from '../hooks';
 
 export type SelectEventHandler = (
   text: string,

package/src/FocusLock/tabUtils.ts

@@ -26,3 +26,15 @@ export const getTabblableNodes = (
 
   return Array.from(parentNode.querySelectorAll(tabblable));
 };
+
+export function focusOnChildNode(parentNode: HTMLElement, itemIndex: 0 | -1) {
+  const elements = getTabblableNodes(parentNode);
+  if (elements.length > 0) {
+    elements[itemIndex === -1 ? elements.length - 1 : 0].focus();
+  } else {
+    const currentTabIndex = parentNode.tabIndex;
+    parentNode.tabIndex = 0;
+    parentNode.focus();
+    parentNode.tabIndex = currentTabIndex;
+  }
+}

package/src/FocusLock/useFocusLock.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { getTabblableNodes } from './tabUtils';
+import { focusOnChildNode } from './tabUtils';
 
 export interface FocusLockOptions {
   enabled: boolean;
@@ -28,23 +28,16 @@ export function useFocusLock(
         }
 
         if (event.target === lockEndRef.current) {
-          rootEl.focus();
+          focusOnChildNode(rootEl, 0);
         } else if (event.target === lockStartRef.current) {
-          const nodes = getTabblableNodes(rootEl);
-
-          if (nodes.length > 0) {
-            const nodeToFocus = nodes.length - 1;
-            nodes[nodeToFocus].focus();
-          } else {
-            rootEl.focus();
-          }
+          focusOnChildNode(rootEl, -1);
         } else if (
           document !== event.target &&
           rootEl !== event.target &&
           !rootEl.contains(event.target as any)
         ) {
           event.preventDefault();
-          rootEl.focus();
+          focusOnChildNode(rootEl, 0);
         }
       };
 

package/src/Menu/Menu.tsx

@@ -1,7 +1,6 @@
-import { forwardRef, useRef, Fragment } from 'react';
+import { forwardRef, useRef, Fragment, useId } from 'react';
 import type * as React from 'react';
 import { MenuProvider, MenuContextProps } from './context';
-import { useId } from '../hooks/useId';
 import { useControlledState } from '../hooks';
 
 export interface MenuProps {

package/src/Menu/MenuButton.tsx

@@ -1,8 +1,7 @@
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import type * as React from 'react';
 import { useMenuContext } from './context';
 import { wrapEvent } from '../utils/wrapEvent';
-import { useId } from '../hooks';
 
 export type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   as?: React.ElementType<any>;
@@ -32,7 +31,8 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
       onChange,
     } = useMenuContext();
 
-    const buttonId = useId(preferredId);
+    const buttonIdGenerated = useId();
+    const buttonId = preferredId || buttonIdGenerated;
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
       if (disabled) {

package/src/Menu/MenuItem.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useId } from 'react';
 import type * as React from 'react';
 import { useMenuContext, useMenuListContext } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
@@ -25,10 +25,10 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
     onKeyDown,
     ...otherProps
   } = props;
-  const { menuListIdRef, onChange, buttonRef } = useMenuContext();
+  const { onChange, buttonRef } = useMenuContext();
   const { navigationItem, onNavigate } = useMenuListContext();
   const ref = useRef<HTMLLIElement>();
-  const itemIndex = useRef(-1);
+  const itemId = useId();
 
   const isActive = ref.current && ref.current === navigationItem;
 
@@ -65,9 +65,7 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
   return (
     <Comp
       ref={assignMultipleRefs(ref, forwardedRef)}
-      id={
-        disabled ? undefined : `${menuListIdRef.current}_${itemIndex.current}`
-      }
+      id={disabled ? undefined : itemId}
       data-menu-item=""
       data-highlighted={isActive ? '' : undefined}
       role="menuitem"

package/src/Modal/Modal.story.tsx

@@ -91,7 +91,9 @@ const SimpleModalControlledExample = () => {
 
   return (
     <>
-      <button onClick={() => setOpen(!open)}>Open modal</button>
+      <button id="open-modal" onClick={() => setOpen(!open)}>
+        Open modal
+      </button>
       {open && (
         <Portal>
           <ModalBackdrop onClose={handleClose}>
@@ -113,12 +115,16 @@ const NestedModalControlledExample = () => {
 
   return (
     <>
-      <button onClick={() => setOpen(!open)}>Open modal</button>
+      <button id="open-modal" onClick={() => setOpen(!open)}>
+        Open modal
+      </button>
       {open && (
         <Portal>
           <ModalBackdrop onClose={() => setOpen(false)}>
             <Modal trapFocus={true}>
-              <button onClick={() => setOpen2(true)}>Open another modal</button>
+              <button id="open-another-modal" onClick={() => setOpen2(true)}>
+                Open another modal
+              </button>
               {open2 && (
                 <Portal>
                   <ModalBackdrop onClose={() => setOpen2(false)}>
@@ -130,7 +136,13 @@ const NestedModalControlledExample = () => {
                 </Portal>
               )}
               <LoremIpsum numOfParagraphs={1} />
-              <button onClick={() => setOpen(false)}>Close</button>
+              <button
+                autoFocus
+                id="close-button"
+                onClick={() => setOpen(false)}
+              >
+                Close
+              </button>
             </Modal>
           </ModalBackdrop>
         </Portal>
@@ -187,7 +199,9 @@ const SimpleModalControlledAnimatedExample = () => {
 
   return (
     <>
-      <button onClick={handleOpen}>Open modal</button>
+      <button id="open-modal" onClick={handleOpen}>
+        Open modal
+      </button>
       {open && (
         <Portal>
           <animated.div

package/src/Modal/Modal.tsx

@@ -19,7 +19,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
   ) => {
     const modalRef = useRef<HTMLDivElement>(null);
 
-    useFocusReturn(trapFocus);
+    useFocusReturn(trapFocus, modalRef);
     useRemoveBodyScroll(trapFocus);
     useAutoFocus(trapFocus, modalRef);
 
@@ -31,7 +31,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
           role="dialog"
           aria-modal="true"
           style={style}
-          tabIndex={0}
+          tabIndex={-1}
           {...otherProps}
         >
           {children}

package/src/Popper/Popper.tsx

@@ -123,6 +123,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/RadioButton/RadioGroup.tsx

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

package/src/Tabs/TabList.tsx

@@ -1,7 +1,14 @@
-import { forwardRef, useRef, useEffect, Children, cloneElement } from 'react';
+import {
+  forwardRef,
+  useRef,
+  useEffect,
+  Children,
+  cloneElement,
+  useId,
+} from 'react';
 import type * 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/Tooltip/useTooltip.ts

@@ -1,7 +1,6 @@
-import { useRef, RefAttributes, useEffect, useState } from 'react';
+import { useRef, RefAttributes, 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 +42,7 @@ export function useTooltip(
   } = childProps;
   const anchorEl = useRef<HTMLElement>(null);
   const [visible, setVisible] = useState(false);
-  const id = useId('');
+  const id = useId();
 
   useEffect(() => {
     subscription.subscribe(() => {

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,4 +1,5 @@
 import { useEffect } from 'react';
+import { focusOnChildNode } from '../FocusLock/tabUtils';
 
 export function useAutoFocus(
   open: boolean,
@@ -6,7 +7,13 @@ export function useAutoFocus(
 ) {
   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/useFocusReturn.ts

@@ -1,23 +1,42 @@
-import { useEffect, useRef } from 'react';
+import { MutableRefObject, 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/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/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;
-}