@basic-ui/core 0.0.36 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.36",
+  "version": "0.0.39",
   "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": "255161ee895cdd62ff5de0a539562d593d215cdb"
+  "gitHead": "bda815fc43ce5234609c4cd0c7e98074f06d70e3"
 }

package/src/Accordion/Accordion.story.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
+
 import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './';
-import { storiesOf } from '@storybook/react';
 import './styles.css';
 
-const stories = storiesOf('Components/Accordion', module);
+export default {
+  title: 'components/Accordion',
+};
 
 function AccordionControlled() {
   const [expandedId, setExpandedId] = useState(0);
@@ -67,6 +69,6 @@ function SingleAccordionItem() {
   );
 }
 
-stories.add('controlled', () => <AccordionControlled />);
+export const Controlled = () => <AccordionControlled />;
 
-stories.add('single accordion, controlled', () => <SingleAccordionItem />);
+export const SingleAccordionControlled = () => <SingleAccordionItem />;

package/src/Accordion/Accordion.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useRef, useState } from 'react';
-import type * as React from 'react';
-import { AccordionContextProps, AccordionProvider } from './context';
+import * as React from 'react';
+
+import type { AccordionContextProps } from './context';
+import { AccordionProvider } from './context';
 import { useScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';
 

package/src/Accordion/AccordionBody.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useState, useEffect, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useAccordionItemContext, useAccordionContext } from './context';
 import { bodyScopeQuery as scopeQuery } from './scopeQuery';
 import { assignMultipleRefs } from '../utils';
@@ -24,9 +25,8 @@ export const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(
 
     useEffect(() => {
       if (accordionContext) {
-        const allHeaders = accordionContext.scope.current.queryAllNodes(
-          scopeQuery
-        );
+        const allHeaders =
+          accordionContext.scope.current.queryAllNodes(scopeQuery);
 
         const index = allHeaders.findIndex((e) => e === ref.current);
         setIndex(index);

package/src/Accordion/AccordionHeader.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useRef, useState, useEffect } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { wrapEvent, assignMultipleRefs, getCircularIndex } from '../utils';
 import { useAccordionContext, useAccordionItemContext } from './context';
 import { headerScopeQuery as scopeQuery } from './scopeQuery';
@@ -66,7 +67,7 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
       switch (e.key) {
         case 'Enter':
         case ' ': {
-          onClick((e as unknown) as React.MouseEvent<HTMLDivElement>);
+          onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
           e.preventDefault();
           break;
         }
@@ -77,9 +78,8 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
           if (!accordionContext) {
             return;
           }
-          const allHeaders = accordionContext.scope.current.queryAllNodes(
-            scopeQuery
-          );
+          const allHeaders =
+            accordionContext.scope.current.queryAllNodes(scopeQuery);
 
           e.preventDefault();
 
@@ -126,9 +126,8 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
 
     const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
       if (accordionContext) {
-        const allHeaders = accordionContext.scope.current.queryAllNodes(
-          scopeQuery
-        );
+        const allHeaders =
+          accordionContext.scope.current.queryAllNodes(scopeQuery);
         const newFocusIsHeader =
           allHeaders.findIndex((header) => header === e.relatedTarget) >= 0;
 

package/src/Accordion/AccordionItem.tsx

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

package/src/Accordion/context.ts

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

package/src/CheckBox/CheckBox.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useControlledState } from '../hooks';
 
 export interface CheckBoxProps

package/src/ComboBox/ComboBox.story.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
-import type * as React from 'react';
-import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+
 import { ComboboxOption } from './ComboboxOption';
 import { ComboboxList } from './ComboboxList';
 import { ComboboxPopover } from './ComboboxPopover';
@@ -10,7 +10,9 @@ import { Combobox } from './Combobox';
 import cities from './cities';
 import './styles.css';
 
-const stories = storiesOf('Components/Combobox', module);
+export default {
+  title: 'components/Combobox',
+};
 
 function useCityMatch(searchTerm: string) {
   return useMemo(() => {
@@ -108,11 +110,11 @@ export function ControlledClientSideExample({ initialValue = '' }) {
   );
 }
 
-stories.add('Uncontrolled Clientside', () => <UncontrolledClientSideExample />);
-stories.add('Uncontrolled Clientside - Initial', () => (
+export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
+export const UncontrolledClientSideInitial = () => (
   <UncontrolledClientSideExample initialValue="Aberdeen" />
-));
-stories.add('Controlled Clientside', () => <ControlledClientSideExample />);
-stories.add('Controlled Clientside - Initial', () => (
+);
+export const ControlledClientSide = () => <ControlledClientSideExample />;
+export const ControlledClientsideInitial = () => (
   <ControlledClientSideExample initialValue="Aberdeen" />
-));
+);

package/src/ComboBox/Combobox.tsx

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

package/src/ComboBox/ComboboxButton.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useComboBoxContext } from './context';
 import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
@@ -21,14 +22,8 @@ export const ComboboxButton = forwardRef<
   { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },
   ref
 ) {
-  const {
-    transition,
-    data,
-    state,
-    buttonRef,
-    listboxIdRef,
-    isVisible,
-  } = useComboBoxContext();
+  const { transition, data, state, buttonRef, listboxIdRef, isVisible } =
+    useComboBoxContext();
 
   const handleKeyDown = useKeyDown();
 

package/src/ComboBox/ComboboxInput.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useEffect, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import {
   useBlur,
   CLEAR,

package/src/ComboBox/ComboboxLabel.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useComboBoxContext } from './context';
 
 export interface ComboboxLabelProps

package/src/ComboBox/ComboboxList.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useRef, useEffect } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useComboBoxContext } from './context';
 import { getScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';

package/src/ComboBox/ComboboxOption.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { forwardRef, useEffect, useRef } from 'react';
+import * as React from 'react';
 
-import type * as React from 'react';
 import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { useComboBoxContext } from './context';

package/src/ComboBox/ComboboxPopover.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useKeyDown, useBlur } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { assignMultipleRefs } from '../utils/assignRef';

package/src/ComboBox/context.ts

@@ -1,7 +1,8 @@
 import { createContext, useContext } from 'react';
-import { ActionTypes, StateTypes, ReducerState } from './hooks';
-import { SelectEventHandler } from './Combobox';
-import { Scope } from '../hooks';
+
+import type { ActionTypes, StateTypes, ReducerState } from './hooks';
+import type { SelectEventHandler } from './Combobox';
+import type { Scope } from '../hooks';
 
 export interface ComboBoxContextProps {
   data: Omit<ReducerState, 'state'>;

package/src/ComboBox/hooks.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable default-case */
 import { useEffect } from 'react';
-import {
+
+import type {
   StateChart as GenericStateChart,
   StateMachineState,
 } from '../hooks/useReducerMachine';
@@ -357,10 +358,8 @@ export function useKeyDown() {
       }
       case 'Enter': {
         if (state === NAVIGATING && navigationItem !== '') {
-          const {
-            value: navigationValue,
-            text: navigationText,
-          } = optionsRef.current[navigationItem];
+          const { value: navigationValue, text: navigationText } =
+            optionsRef.current[navigationItem];
 
           // don't want to submit forms
           event.preventDefault();
@@ -408,10 +407,8 @@ export function useBlur() {
             transition(BLUR, { text: stateText, item: '' });
           } else {
             // select the currently selected item
-            const {
-              value: navigationValue,
-              text: navigationText,
-            } = optionsRef.current[navigationItem];
+            const { value: navigationValue, text: navigationText } =
+              optionsRef.current[navigationItem];
 
             onSelect &&
               onSelect(navigationText, navigationItem, navigationValue);

package/src/FocusLock/FocusLock.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useFocusLock } from './useFocusLock';
 
 export interface FocusLockProps extends React.HTMLAttributes<HTMLDivElement> {

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,6 @@
 import { useEffect } from 'react';
-import { getTabblableNodes } from './tabUtils';
+
+import { focusOnChildNode } from './tabUtils';
 
 export interface FocusLockOptions {
   enabled: boolean;
@@ -28,23 +29,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/List/List.story.tsx

@@ -1,7 +1,10 @@
 import { List, ListItem } from './';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/List',
+};
+
 const Example = () => {
   return (
     <List>
@@ -12,6 +15,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/List', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/List/List.tsx

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

package/src/List/ListItem.tsx

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

package/src/Menu/Menu.story.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react';
-import type * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
+import * as React from 'react';
 import { animated, useSpring } from 'react-spring';
+
+import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
 import './styles.css';
 
-const stories = storiesOf('Components/Menu', module);
+export default {
+  title: 'components/Menu',
+};
 
 const noop = () => {
   // noop function to be used on onRest, as a cleanup
@@ -90,10 +92,10 @@ const MenuControlledWithAnimation = () => {
         <MenuList
           as={animated.ul}
           style={{
-            opacity: (opacity as unknown) as number,
-            transform: (scale.to(
+            opacity: opacity as unknown as number,
+            transform: scale.to(
               (x) => `scale(${x}, ${x * x})`
-            ) as unknown) as string,
+            ) as unknown as string,
           }}
         >
           <MenuItem>Dog</MenuItem>
@@ -139,20 +141,20 @@ const MenuWithMultipleButtons = () => {
   );
 };
 
-stories.add('Controlled', () => (
+export const Controlled = () => (
   <Wrapper>
     <MenuControlled />
   </Wrapper>
-));
+);
 
-stories.add('With animation, controlled', () => (
+export const WithAnimationControlled = () => (
   <Wrapper>
     <MenuControlledWithAnimation />
   </Wrapper>
-));
+);
 
-stories.add('With multiple buttons', () => (
+export const WithMultipleButtons = () => (
   <Wrapper>
     <MenuWithMultipleButtons />
   </Wrapper>
-));
+);

package/src/Menu/Menu.tsx

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

package/src/Menu/MenuButton.tsx

@@ -1,8 +1,8 @@
-import { forwardRef } from 'react';
-import type * as React from 'react';
+import { forwardRef, useId } from 'react';
+import * 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>;
@@ -24,15 +24,11 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
       disabled,
       ...otherProps
     } = props;
-    const {
-      menuListIdRef,
-      openWithArrowKeyRef,
-      open,
-      buttonRef,
-      onChange,
-    } = useMenuContext();
+    const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, 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,5 +1,6 @@
-import { forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import { forwardRef, useRef, useId } from 'react';
+import * as React from 'react';
+
 import { useMenuContext, useMenuListContext } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils';
@@ -25,10 +26,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 +66,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/Menu/MenuList.tsx

@@ -5,7 +5,8 @@ import {
   useState,
   useLayoutEffect,
 } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useMenuContext, MenuListProvider } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
@@ -32,13 +33,8 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       ...otherProps
     } = props;
 
-    const {
-      menuListIdRef,
-      buttonRef,
-      onChange,
-      openWithArrowKeyRef,
-      open,
-    } = useMenuContext();
+    const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =
+      useMenuContext();
 
     const [navigationItem, setNavigationItem] = useState<
       HTMLElement | undefined

package/src/Menu/MenuPopover.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Popper, PopperProps } from '../Popper';
+import * as React from 'react';
+
+import type { PopperProps } from '../Popper';
+import { Popper } from '../Popper';
 import { useMenuContext } from './context';
 
 export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {

package/src/Menu/context.ts

@@ -1,4 +1,5 @@
-import { createContext, useContext, MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
 
 export type ItemObject = { text: string; value: any; id: string | undefined };