@basic-ui/core 0.0.35 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.35",
+  "version": "0.0.38",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -15,26 +15,26 @@
   "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": {
     "@babel/runtime": "^7.0.0",
-    "react": ">=16.14.0 || >=17.0.0",
-    "react-dom": ">=16.14.0 || >=17.0.0"
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "cbc74c92645db81f0f66c4bb52c69bf3f769bdcd"
+  "gitHead": "f3a2affbe87fb4f5e59f5528f9e3af53fc311120"
 }

package/src/Accordion/Accordion.story.tsx

@@ -1,9 +1,10 @@
 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 +68,6 @@ function SingleAccordionItem() {
   );
 }
 
-stories.add('controlled', () => <AccordionControlled />);
+export const Controlled = () => <AccordionControlled />;
 
-stories.add('single accordion, controlled', () => <SingleAccordionItem />);
+export const SingleAccordionControlled = () => <SingleAccordionItem />;

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,16 +1,18 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useRef } from 'react';
 import type * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import { ComboboxOption } from './ComboboxOption';
 import { ComboboxList } from './ComboboxList';
 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';
 
-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,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/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/Menu/Menu.story.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import type * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
 import { animated, useSpring } from 'react-spring';
 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
@@ -139,20 +140,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,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

@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import { storiesOf } from '@storybook/react';
 import { useSpring, animated } from 'react-spring';
 import { Modal, ModalBackdrop } from './';
 import { Portal } from '../Portal';
 import './styles.css';
 
-const stories = storiesOf('Components/Modal', module);
+export default {
+  title: 'components/Modal',
+};
 
 const LoremIpsum = ({ numOfParagraphs = 20 }) => {
   const content = [];
@@ -81,7 +82,7 @@ const Wrapper = ({ children }) => {
   );
 };
 
-const SimpleModalControlled = () => {
+const SimpleModalControlledExample = () => {
   const [open, setOpen] = useState(false);
 
   const handleClose = () => {
@@ -90,7 +91,9 @@ const SimpleModalControlled = () => {
 
   return (
     <>
-      <button onClick={() => setOpen(!open)}>Open modal</button>
+      <button id="open-modal" onClick={() => setOpen(!open)}>
+        Open modal
+      </button>
       {open && (
         <Portal>
           <ModalBackdrop onClose={handleClose}>
@@ -106,18 +109,22 @@ const SimpleModalControlled = () => {
   );
 };
 
-const NestedModalControlled = () => {
+const NestedModalControlledExample = () => {
   const [open, setOpen] = useState(false);
   const [open2, setOpen2] = useState(false);
 
   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)}>
@@ -129,7 +136,13 @@ const NestedModalControlled = () => {
                 </Portal>
               )}
               <LoremIpsum numOfParagraphs={1} />
-              <button onClick={() => setOpen(false)}>Close</button>
+              <button
+                autoFocus
+                id="close-button"
+                onClick={() => setOpen(false)}
+              >
+                Close
+              </button>
             </Modal>
           </ModalBackdrop>
         </Portal>
@@ -138,7 +151,7 @@ const NestedModalControlled = () => {
   );
 };
 
-const SimpleModalControlledAnimated = () => {
+const SimpleModalControlledAnimatedExample = () => {
   const [open, setOpen] = useState(false);
   const [pointerEvents, setPointerEvents] = useState('none');
   const [{ scale, opacity }, set] = useSpring(() => ({
@@ -186,7 +199,9 @@ const SimpleModalControlledAnimated = () => {
 
   return (
     <>
-      <button onClick={handleOpen}>Open modal</button>
+      <button id="open-modal" onClick={handleOpen}>
+        Open modal
+      </button>
       {open && (
         <Portal>
           <animated.div
@@ -223,20 +238,20 @@ const SimpleModalControlledAnimated = () => {
   );
 };
 
-stories.add('Simple modal, controlled', () => (
+export const SimpleModalControlled = () => (
   <Wrapper>
-    <SimpleModalControlled />
+    <SimpleModalControlledExample />
   </Wrapper>
-));
+);
 
-stories.add('Nested modal, controlled', () => (
+export const NestedModalControlled = () => (
   <Wrapper>
-    <NestedModalControlled />
+    <NestedModalControlledExample />
   </Wrapper>
-));
+);
 
-stories.add('Simple modal, controlled, animated', () => (
+export const SimpleModalControlledAnimated = () => (
   <Wrapper>
-    <SimpleModalControlledAnimated />
+    <SimpleModalControlledAnimatedExample />
   </Wrapper>
-));
+);

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/Modal/NavDrawer.story.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import { storiesOf } from '@storybook/react';
 import { useSpring, animated } from 'react-spring';
 import { Modal, ModalBackdrop } from './';
 import { Portal } from '../Portal';
 import './styles.css';
 
-const stories = storiesOf('Components/Modal/NavDrawer', module);
+export default {
+  title: 'components/Modal/NavDrawer',
+};
 
 const LoremIpsum = ({ numOfParagraphs = 20 }) => {
   const content = [];
@@ -150,8 +151,8 @@ const SimpleModalControlledAnimated = () => {
   );
 };
 
-stories.add('NavDrawer, controlled, animated', () => (
+export const ControlledAnimated = () => (
   <Wrapper>
     <SimpleModalControlledAnimated />
   </Wrapper>
-));
+);

package/src/Popper/Popper.story.tsx

@@ -1,11 +1,12 @@
 import { useRef, useState, useEffect } from 'react';
 import { useSpring, animated } from 'react-spring';
-import { storiesOf } from '@storybook/react';
 import { Popper } from './Popper';
 import { PopperArrow } from './PopperArrow';
 import './styles.css';
 
-const stories = storiesOf('Components/Popper', module);
+export default {
+  title: 'components/Popper',
+};
 
 const noop = () => {
   // noop function to be used on onRest, as a cleanup
@@ -188,7 +189,7 @@ const PopperFixedExample = ({ showAll = false, showArrow = false }) => {
   );
 };
 
-const JumpingPopper = () => {
+const JumpingPopperExample = () => {
   const [currentPopperIndex, setCurrentPopperIndex] = useState(0);
   const ref1 = useRef();
   const ref2 = useRef();
@@ -227,7 +228,7 @@ const JumpingPopper = () => {
   );
 };
 
-const RerenderingPopper = () => {
+const RerenderingPopperExample = () => {
   const [value, setValue] = useState('');
   const ref = useRef<HTMLButtonElement>(null);
   return (
@@ -248,20 +249,16 @@ const RerenderingPopper = () => {
   );
 };
 
-stories.add('Single point', () => <PopperExample />);
+export const SinglePoint = () => <PopperExample />;
 
-stories.add('All points', () => <PopperExample showAll={true} />);
+export const AllPoints = () => <PopperExample showAll={true} />;
 
-stories.add('Single point, with arrow', () => (
-  <PopperExample showArrow={true} />
-));
+export const SinglePointWithArrow = () => <PopperExample showArrow={true} />;
 
-stories.add('All points, with arrow', () => (
+export const AllPointsWithArrow = () => (
   <PopperExample showAll={true} showArrow={true} />
-));
+);
 
-stories.add('Fixed popper, all points', () => (
-  <PopperFixedExample showAll={true} />
-));
-stories.add('Re-rendering popper', () => <RerenderingPopper />);
-stories.add('Jumping popper', () => <JumpingPopper />);
+export const FixedPopperAllPoints = () => <PopperFixedExample showAll={true} />;
+export const RerenderingPopper = () => <RerenderingPopperExample />;
+export const JumpingPopper = () => <JumpingPopperExample />;

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/RadioButton.story.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react';
 import { RadioButton, RadioGroup } from './';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
-const Uncontrolled = (props: { initialValue?: string }) => {
+export default {
+  title: 'components/RadioButton',
+};
+
+const UncontrolledExample = (props: { initialValue?: string }) => {
   return (
     <RadioGroup defaultValue={props.initialValue}>
       <label>
@@ -30,7 +33,7 @@ const Uncontrolled = (props: { initialValue?: string }) => {
   );
 };
 
-const Controlled = () => {
+const ControlledExample = () => {
   const [value, setValue] = useState(undefined);
 
   return (
@@ -64,10 +67,10 @@ const Controlled = () => {
   );
 };
 
-const stories = storiesOf('Components/RadioButton', module);
+export const Uncontrolled = () => <UncontrolledExample />;
+
+export const UncontrolledWithInitialValue = () => (
+  <UncontrolledExample initialValue={'highly disagree'} />
+);
 
-stories.add('uncontrolled', () => <Uncontrolled />);
-stories.add('uncontrolled, initial value set', () => (
-  <Uncontrolled initialValue={'highly disagree'} />
-));
-stories.add('controlled', () => <Controlled />);
+export const Controlled = () => <ControlledExample />;

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/Spinner/Spinner.story.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import { Spinner, SpinnerButton } from './';
-import { storiesOf } from '@storybook/react';
 import './styles.css';
 
-const stories = storiesOf('Components/Spinner', module);
+export default {
+  title: 'components/Spinner',
+};
 
 const Example = ({ vertical = false }) => {
   const [value, setValue] = useState(0);
@@ -25,6 +26,5 @@ const Example = ({ vertical = false }) => {
   );
 };
 
-stories.add('horizontal', () => <Example />);
-
-stories.add('vertical', () => <Example vertical={true} />);
+export const Horizontal = () => <Example />;
+export const Vertical = () => <Example vertical={true} />;