@basic-ui/core 0.0.32 → 0.0.33

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "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",
@@ -20,7 +19,7 @@
     "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": "5aa740f6686e8ed8b633d4e0d173a6dd91d28bef"
 }

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);
     }
   }