@basic-ui/core 0.0.34 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.34",
+  "version": "0.0.37",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -33,8 +33,8 @@
   },
   "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": "010fcc15ed96213f5532c44442039805530ec0c4"
+  "gitHead": "78b668ff80ce86a4672b3f34ca2c1aaaf79c56eb"
 }

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

@@ -1,6 +1,5 @@
 import { useMemo, useState } 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';
@@ -10,7 +9,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 +109,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/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/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 = () => {
@@ -106,7 +107,7 @@ const SimpleModalControlled = () => {
   );
 };
 
-const NestedModalControlled = () => {
+const NestedModalControlledExample = () => {
   const [open, setOpen] = useState(false);
   const [open2, setOpen2] = useState(false);
 
@@ -138,7 +139,7 @@ const NestedModalControlled = () => {
   );
 };
 
-const SimpleModalControlledAnimated = () => {
+const SimpleModalControlledAnimatedExample = () => {
   const [open, setOpen] = useState(false);
   const [pointerEvents, setPointerEvents] = useState('none');
   const [{ scale, opacity }, set] = useSpring(() => ({
@@ -223,20 +224,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/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/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/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} />;

package/src/Tabs/Tab.story.tsx

@@ -1,9 +1,10 @@
 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 +68,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/Tooltip/Tooltip.story.tsx

@@ -1,10 +1,13 @@
 import React, { useRef, forwardRef } from 'react';
 import { Tooltip } from './';
-import { storiesOf } from '@storybook/react';
 import { Popper } from '../Popper/Popper';
 import { InjectedTooltipProps } from './useTooltip';
 import './styles.css';
 
+export default {
+  title: 'components/Tooltip',
+};
+
 const StyledTooltip = forwardRef<HTMLDivElement, InjectedTooltipProps>(
   ({ children, anchorEl, ...props }, ref) => {
     return (
@@ -53,7 +56,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/useTooltip.ts

@@ -1,4 +1,4 @@
-import React, { useRef, RefAttributes, useEffect, useState } from 'react';
+import { useRef, RefAttributes, useEffect, useState } from 'react';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
 import { useId } from '../hooks/useId';

package/src/hooks/useGestureHandlers.ts

@@ -17,6 +17,7 @@ export interface GestureHandlersState {
   yVelocity: number;
   startTime: number;
   down: boolean;
+  scrollLocked: boolean;
 }
 
 type SetStateFunc<S> = (
@@ -31,6 +32,7 @@ export interface GestureHandlersReturn {
 
 export interface GestureHandlerOptions {
   ensureTargetIsContainer?: boolean;
+  minTouchDelta?: number;
 }
 
 export const initialGestureHandlersState: GestureHandlersState = {
@@ -49,6 +51,7 @@ export const initialGestureHandlersState: GestureHandlersState = {
   yVelocity: 0,
   startTime: 0,
   down: false,
+  scrollLocked: false,
 };
 
 const FRAMERATE_CONST = 1000 / 60; // 60 fps
@@ -59,7 +62,7 @@ export function gestureHandlers(
   containerRef?: React.MutableRefObject<HTMLElement | null>,
   options: GestureHandlerOptions = {}
 ): GestureHandlersReturn {
-  const { ensureTargetIsContainer = false } = options;
+  const { ensureTargetIsContainer = false, minTouchDelta = 0 } = options;
 
   // Common handlers
   const handleUp = () => {
@@ -102,6 +105,7 @@ export function gestureHandlers(
         yPrev: pageY,
         startTime: Date.now(),
         down: true,
+        scrollLocked: false,
       };
 
       return newState;
@@ -129,18 +133,33 @@ export function gestureHandlers(
     }
 
     set((state: GestureHandlersState) => {
+      function getDeltaSum(
+        currentPos: number,
+        initialPos: number,
+        prevPos: number
+      ): number {
+        if (
+          state.scrollLocked ||
+          Math.abs(currentPos - initialPos) >= minTouchDelta
+        ) {
+          state.scrollLocked = true;
+          return currentPos - prevPos;
+        }
+        return 0;
+      }
+
       const target =
         (containerRef && containerRef.current) || (e as any).target;
 
       const deltaTime = Date.now() - state.startTime;
 
       const width = target ? target.offsetWidth : NaN;
-      const xDelta = pageX - state.xInitial;
+      const xDelta = state.xDelta + getDeltaSum(pageX, state.xInitial, state.x);
       const xDeltaPercent = (xDelta * 100) / width;
       const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
 
       const height = target ? target.offsetHeight : NaN;
-      const yDelta = pageY - state.yInitial;
+      const yDelta = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);
       const yDeltaPercent = (yDelta * 100) / height;
       const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);