@basic-ui/core 0.0.36 → 0.0.39

package/src/Modal/Modal.story.tsx

@@ -1,11 +1,13 @@
 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 +83,7 @@ const Wrapper = ({ children }) => {
   );
 };
 
-const SimpleModalControlled = () => {
+const SimpleModalControlledExample = () => {
   const [open, setOpen] = useState(false);
 
   const handleClose = () => {
@@ -90,7 +92,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 +110,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 +137,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 +152,7 @@ const NestedModalControlled = () => {
   );
 };
 
-const SimpleModalControlledAnimated = () => {
+const SimpleModalControlledAnimatedExample = () => {
   const [open, setOpen] = useState(false);
   const [pointerEvents, setPointerEvents] = useState('none');
   const [{ scale, opacity }, set] = useSpring(() => ({
@@ -186,7 +200,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 +239,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

@@ -1,5 +1,7 @@
-import { ReactNode, forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import type { ReactNode } from 'react';
+import { forwardRef, useRef } from 'react';
+import * as React from 'react';
+
 import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
 import { FocusLock } from '../FocusLock';
 import { assignMultipleRefs } from '../utils';
@@ -19,7 +21,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
   ) => {
     const modalRef = useRef<HTMLDivElement>(null);
 
-    useFocusReturn(trapFocus);
+    useFocusReturn(trapFocus, modalRef);
     useRemoveBodyScroll(trapFocus);
     useAutoFocus(trapFocus, modalRef);
 
@@ -31,7 +33,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
           role="dialog"
           aria-modal="true"
           style={style}
-          tabIndex={0}
+          tabIndex={-1}
           {...otherProps}
         >
           {children}

package/src/Modal/ModalBackdrop.tsx

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

package/src/Modal/NavDrawer.story.tsx

@@ -1,11 +1,13 @@
 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 = [];
@@ -64,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,
@@ -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,13 @@
 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
@@ -159,9 +161,7 @@ function Menu() {
   );
 }
 
-const PopperFixedExample = ({ showAll = false, showArrow = false }) => {
-  const ref = useRef<any>(null);
-
+const PopperFixedExample = () => {
   return (
     <>
       <div
@@ -188,7 +188,7 @@ const PopperFixedExample = ({ showAll = false, showArrow = false }) => {
   );
 };
 
-const JumpingPopper = () => {
+const JumpingPopperExample = () => {
   const [currentPopperIndex, setCurrentPopperIndex] = useState(0);
   const ref1 = useRef();
   const ref2 = useRef();
@@ -227,7 +227,7 @@ const JumpingPopper = () => {
   );
 };
 
-const RerenderingPopper = () => {
+const RerenderingPopperExample = () => {
   const [value, setValue] = useState('');
   const ref = useRef<HTMLButtonElement>(null);
   return (
@@ -248,20 +248,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 />;
+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,9 +1,13 @@
 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 +34,7 @@ const Uncontrolled = (props: { initialValue?: string }) => {
   );
 };
 
-const Controlled = () => {
+const ControlledExample = () => {
   const [value, setValue] = useState(undefined);
 
   return (
@@ -64,10 +68,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/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,9 +1,11 @@
 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 +27,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} />;

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,9 +1,11 @@
 import { useState } from 'react';
+
 import { Tab, TabPanel, TabPanels, Tabs, TabList } from './';
-import { storiesOf } from '@storybook/react';
 import './styles.css';
 
-const stories = storiesOf('Components/Tab', module);
+export default {
+  title: 'components/Tab',
+};
 
 export const ExampleHorizontal = ({ manualActivation = false }) => {
   const [index, setIndex] = useState(0);
@@ -67,12 +69,12 @@ export const ExampleVertical = ({ manualActivation = false }) => {
   );
 };
 
-stories.add('horizontal, controlled', () => <ExampleHorizontal />);
-stories.add('horizontal, controlled, manual activation', () => (
+export const HorizontalControlled = () => <ExampleHorizontal />;
+export const HorizontalControlledManualActivation = () => (
   <ExampleHorizontal manualActivation={true} />
-));
+);
 
-stories.add('vertical, controlled', () => <ExampleVertical />);
-stories.add('vertical, controlled, manual activation', () => (
+export const VerticalControlled = () => <ExampleVertical />;
+export const VerticalControlledManualActivation = () => (
   <ExampleVertical manualActivation={true} />
-));
+);

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,10 +1,14 @@
 import React, { useRef, forwardRef } from 'react';
+
 import { Tooltip } from './';
-import { storiesOf } from '@storybook/react';
 import { Popper } from '../Popper/Popper';
-import { InjectedTooltipProps } from './useTooltip';
+import type { InjectedTooltipProps } from './useTooltip';
 import './styles.css';
 
+export default {
+  title: 'components/Tooltip',
+};
+
 const StyledTooltip = forwardRef<HTMLDivElement, InjectedTooltipProps>(
   ({ children, anchorEl, ...props }, ref) => {
     return (
@@ -53,7 +57,5 @@ const ExampleWithHidingButton = () => {
   );
 };
 
-const stories = storiesOf('Components/Tooltip', module);
-
-stories.add('controlled', () => <Example />);
-stories.add('with hiding button', () => <ExampleWithHidingButton />);
+export const Controlled = () => <Example />;
+export const WithHidingButton = () => <ExampleWithHidingButton />;

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(() => {

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';