@basic-ui/core 0.0.32 → 0.0.35

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.32",
+  "version": "0.0.35",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
-  "private": false,
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",
   "jsnext:main": "./build/esm/index.js",
@@ -15,12 +14,12 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "concurrently \"yarn:build:*\"",
+    "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": "start-storybook -p 9001 -c ../../scripts/storybook",
+    "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",
@@ -37,5 +36,5 @@
     "react": ">=16.14.0 || >=17.0.0",
     "react-dom": ">=16.14.0 || >=17.0.0"
   },
-  "gitHead": "5d730ab4bfea19ceb7fb52d09139c81cb4c3863f"
+  "gitHead": "cbc74c92645db81f0f66c4bb52c69bf3f769bdcd"
 }

package/src/Tooltip/Tooltip.story.tsx

@@ -3,7 +3,7 @@ import { Tooltip } from './';
 import { storiesOf } from '@storybook/react';
 import { Popper } from '../Popper/Popper';
 import { InjectedTooltipProps } from './useTooltip';
-// import './styles.css';
+import './styles.css';
 
 const StyledTooltip = forwardRef<HTMLDivElement, InjectedTooltipProps>(
   ({ children, anchorEl, ...props }, ref) => {
@@ -38,6 +38,22 @@ const Example = () => {
   );
 };
 
+const ExampleWithHidingButton = () => {
+  const buttonRef = useRef();
+  return (
+    <ul style={{ margin: 100 }}>
+      {Array.from({ length: 20 }).map((_, index) => (
+        <li data-hide-child-buttons="" key={index}>
+          <Tooltip label={'Im groot'} as={StyledTooltip}>
+            <button ref={buttonRef}>Hello</button>
+          </Tooltip>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
 const stories = storiesOf('Components/Tooltip', module);
 
 stories.add('controlled', () => <Example />);
+stories.add('with hiding button', () => <ExampleWithHidingButton />);

package/src/Tooltip/stateMachine.ts

@@ -10,7 +10,7 @@ let restTimeout: number;
 function startRestTimer() {
   window.clearTimeout(restTimeout);
   restTimeout = window.setTimeout(() => {
-    send(TooltipEventTypes.Rest, undefined);
+    send(Rest, undefined);
   }, 200);
 }
 
@@ -24,7 +24,7 @@ let leavingVisibleTimer: number;
 function startLeavingVisibleTimer() {
   window.clearTimeout(leavingVisibleTimer);
   leavingVisibleTimer = window.setTimeout(
-    () => send(TooltipEventTypes.TimeComplete, undefined),
+    () => send(TimeComplete, undefined),
     100
   );
 }
@@ -36,41 +36,52 @@ function clearLeavingVisibleTimer() {
 ////////////////////////////////////////////////////////////////////////////////
 // State machine
 
-export enum TooltipStates {
-  // Nothing goin' on
-  Idle = 'IDLE',
-
-  // We're considering showing the tooltip, but we're gonna wait a sec
-  Focused = 'FOCUSED',
-
-  // It's on!
-  Visible = 'VISIBLE',
-
-  // Focus has left, but we want to keep it visible for a sec
-  LeavingVisible = 'LEAVING_VISIBLE',
-
-  // The user clicked the tool, so we want to hide the thing, we can't just use
-  // IDLE because we need to ignore mousemove, etc.
-  Dismissed = 'DISMISSED',
-}
-
-export enum TooltipEventTypes {
-  Blur = 'BLUR',
-  Focus = 'FOCUS',
-  GlobalMouseMove = 'GLOBAL_MOUSE_MOVE',
-  MouseDown = 'MOUSE_DOWN',
-  MouseEnter = 'MOUSE_ENTER',
-  MouseLeave = 'MOUSE_LEAVE',
-  MouseMove = 'MOUSE_MOVE',
-  Rest = 'REST',
-  SelectWithKeyboard = 'SELECT_WITH_KEYBOARD',
-  TimeComplete = 'TIME_COMPLETE',
-}
+export type TooltipStates =
+  | 'IDLE'
+  | 'FOCUSED'
+  | 'VISIBLE'
+  | 'LEAVING_VISIBLE'
+  | 'DISMISSED';
+
+// Nothing goin' on
+export const Idle = 'IDLE' as const;
+// We're considering showing the tooltip, but we're gonna wait a sec
+export const Focused = 'FOCUSED' as const;
+// It's on!
+export const Visible = 'VISIBLE' as const;
+// Focus has left, but we want to keep it visible for a sec
+export const LeavingVisible = 'LEAVING_VISIBLE' as const;
+// The user clicked the tool, so we want to hide the thing, we can't just use
+// IDLE because we need to ignore mousemove, etc.
+export const Dismissed = 'DISMISSED' as const;
+
+export type TooltipEventTypes =
+  | 'BLUR'
+  | 'FOCUS'
+  | 'GLOBAL_MOUSE_MOVE'
+  | 'MOUSE_DOWN'
+  | 'MOUSE_ENTER'
+  | 'MOUSE_LEAVE'
+  | 'MOUSE_MOVE'
+  | 'REST'
+  | 'SELECT_WITH_KEYBOARD'
+  | 'TIME_COMPLETE';
+
+export const Blur = 'BLUR' as const;
+export const Focus = 'FOCUS' as const;
+export const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE' as const;
+export const MouseDown = 'MOUSE_DOWN' as const;
+export const MouseEnter = 'MOUSE_ENTER' as const;
+export const MouseLeave = 'MOUSE_LEAVE' as const;
+export const MouseMove = 'MOUSE_MOVE' as const;
+export const Rest = 'REST' as const;
+export const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD' as const;
+export const TimeComplete = 'TIME_COMPLETE' as const;
 
 export const subscription = createSubscription();
 export const state = {
   current: {
-    state: TooltipStates.Idle,
+    state: Idle as TooltipStates,
     id: '',
   },
 };
@@ -80,40 +91,40 @@ function clearContextId() {
 }
 
 const chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {
-  initial: TooltipStates.Idle,
+  initial: Idle,
   states: {
-    [TooltipStates.Idle]: {
+    [Idle]: {
       enter: () => {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
-        [TooltipEventTypes.Focus]: TooltipStates.Visible,
+        [MouseEnter]: Focused,
+        [Focus]: Visible,
       },
     },
-    [TooltipStates.Focused]: {
+    [Focused]: {
       enter: startRestTimer,
       leave: clearRestTimer,
       on: {
-        [TooltipEventTypes.MouseMove]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
-        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
-        [TooltipEventTypes.Blur]: TooltipStates.Idle,
-        [TooltipEventTypes.Rest]: TooltipStates.Visible,
+        [MouseMove]: Focused,
+        [MouseLeave]: Idle,
+        [MouseDown]: Dismissed,
+        [Blur]: Idle,
+        [Rest]: Visible,
       },
     },
-    [TooltipStates.Visible]: {
+    [Visible]: {
       on: {
-        [TooltipEventTypes.Focus]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseLeave]: TooltipStates.LeavingVisible,
-        [TooltipEventTypes.Blur]: TooltipStates.LeavingVisible,
-        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
-        [TooltipEventTypes.SelectWithKeyboard]: TooltipStates.Dismissed,
-        [TooltipEventTypes.GlobalMouseMove]: TooltipStates.LeavingVisible,
+        [Focus]: Focused,
+        [MouseEnter]: Focused,
+        [MouseLeave]: LeavingVisible,
+        [Blur]: LeavingVisible,
+        [MouseDown]: Dismissed,
+        [SelectWithKeyboard]: Dismissed,
+        [GlobalMouseMove]: LeavingVisible,
       },
     },
-    [TooltipStates.LeavingVisible]: {
+    [LeavingVisible]: {
       enter: () => {
         startLeavingVisibleTimer();
       },
@@ -122,18 +133,18 @@ const chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Visible,
-        [TooltipEventTypes.Focus]: TooltipStates.Visible,
-        [TooltipEventTypes.TimeComplete]: TooltipStates.Idle,
+        [MouseEnter]: Visible,
+        [Focus]: Visible,
+        [TimeComplete]: Idle,
       },
     },
-    [TooltipStates.Dismissed]: {
+    [Dismissed]: {
       leave: () => {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
-        [TooltipEventTypes.Blur]: TooltipStates.Idle,
+        [MouseLeave]: Idle,
+        [Blur]: Idle,
       },
     },
   },

package/src/Tooltip/styles.css

@@ -0,0 +1,17 @@
+[data-hide-child-buttons=""] {
+  background-color: #ddd;
+  display: flex;
+  padding: 20px;
+  min-height: 62px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #aaa;
+  justify-content: flex-end;
+}
+
+[data-hide-child-buttons=""] button {
+  display: none;
+}
+
+[data-hide-child-buttons=""]:hover button {
+  display: block;
+}

package/src/Tooltip/useTooltip.ts

@@ -6,8 +6,15 @@ import {
   send,
   state,
   subscription,
-  TooltipEventTypes,
-  TooltipStates,
+  Blur,
+  Focus,
+  LeavingVisible,
+  MouseDown,
+  MouseEnter,
+  MouseLeave,
+  MouseMove,
+  SelectWithKeyboard,
+  Visible,
 } from './stateMachine';
 
 export type ChildProps = React.HTMLAttributes<HTMLElement> &
@@ -41,46 +48,46 @@ export function useTooltip(
   useEffect(() => {
     subscription.subscribe(() => {
       setVisible(
-        (state.current.state === TooltipStates.Visible ||
-          state.current.state === TooltipStates.LeavingVisible) &&
+        (state.current.state === Visible ||
+          state.current.state === LeavingVisible) &&
           state.current.id === id
       );
     });
   }, [id]);
 
   function handleMouseEnter() {
-    send(TooltipEventTypes.MouseEnter, { id });
+    send(MouseEnter, { id });
   }
 
   function handleMouseMove() {
-    send(TooltipEventTypes.MouseMove, { id });
+    send(MouseMove, { id });
   }
 
   function handleMouseLeave() {
-    send(TooltipEventTypes.MouseLeave);
+    send(MouseLeave);
   }
 
   function handleMouseDown() {
     // Allow quick click from one tool to another
     if (state.current.id === id) {
-      send(TooltipEventTypes.MouseDown);
+      send(MouseDown);
     }
   }
 
   function handleFocus() {
-    send(TooltipEventTypes.Focus, { id });
+    send(Focus, { id });
   }
 
   function handleBlur() {
     // Allow quick click from one tool to another
     if (state.current.id === id) {
-      send(TooltipEventTypes.Blur, undefined);
+      send(Blur, undefined);
     }
   }
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
     if (event.key === 'Enter' || event.key === ' ') {
-      send(TooltipEventTypes.SelectWithKeyboard);
+      send(SelectWithKeyboard);
     }
   }
 

package/src/hooks/useGestureHandlers.ts

@@ -15,7 +15,9 @@ export interface GestureHandlersState {
   yInitial: number;
   yPrev: number;
   yVelocity: number;
+  startTime: number;
   down: boolean;
+  scrollLocked: boolean;
 }
 
 type SetStateFunc<S> = (
@@ -30,6 +32,7 @@ export interface GestureHandlersReturn {
 
 export interface GestureHandlerOptions {
   ensureTargetIsContainer?: boolean;
+  minTouchDelta?: number;
 }
 
 export const initialGestureHandlersState: GestureHandlersState = {
@@ -46,21 +49,33 @@ export const initialGestureHandlersState: GestureHandlersState = {
   yInitial: 0,
   yPrev: 0,
   yVelocity: 0,
+  startTime: 0,
   down: false,
+  scrollLocked: false,
 };
 
+const FRAMERATE_CONST = 1000 / 60; // 60 fps
+const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
+
 export function gestureHandlers(
   set: SetStateFunc<GestureHandlersState>,
   containerRef?: React.MutableRefObject<HTMLElement | null>,
   options: GestureHandlerOptions = {}
 ): GestureHandlersReturn {
-  const { ensureTargetIsContainer = false } = options;
+  const { ensureTargetIsContainer = false, minTouchDelta = 0 } = options;
 
   // Common handlers
   const handleUp = () => {
     set((state: GestureHandlersState) => {
+      const deltaTime = Date.now() - state.startTime;
+      const xDelta = state.x - state.xInitial;
+      const yDelta = state.y - state.yInitial;
+      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
       const newState: GestureHandlersState = {
         ...state,
+        xVelocity,
+        yVelocity,
         target: null,
         down: false,
       };
@@ -88,28 +103,65 @@ export function gestureHandlers(
         yVelocity: 0,
         yInitial: pageY,
         yPrev: pageY,
+        startTime: Date.now(),
         down: true,
+        scrollLocked: false,
       };
 
       return newState;
     });
   };
 
+  function calcVelocity(
+    deltaSpace: number,
+    deltaTime: number,
+    prevVelocity: number
+  ) {
+    if (deltaTime < 1) {
+      deltaTime = 1;
+    }
+    const speed = deltaSpace / deltaTime;
+    const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);
+    return speed * depr + prevVelocity * (1 - depr);
+  }
+
   function handleMove(e: MouseEvent) {
-    const { pageX, movementX, pageY, movementY } = e;
-    e.preventDefault && e.preventDefault(); // prevent drag & drop behaviour from browser
+    const { pageX, pageY } = e;
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault && e.preventDefault();
+    }
 
     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);
 
       const newState = {
         ...state,
@@ -117,12 +169,12 @@ export function gestureHandlers(
         xDeltaPercent,
         x: pageX,
         xPrev: state.x,
-        xVelocity: movementX,
+        xVelocity,
         yDelta,
         yDeltaPercent,
         y: pageY,
         yPrev: state.y,
-        yVelocity: movementY,
+        yVelocity,
       };
 
       return newState;
@@ -133,7 +185,10 @@ export function gestureHandlers(
 
   /* eslint-disable @typescript-eslint/no-use-before-define */
   function handleTouchMove(e: TouchEvent) {
-    e.preventDefault();
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault();
+    }
     handleMove(e.touches.item(0) as any);
   }