@basic-ui/material 0.1.11 → 0.1.14

package/src/Table/Table.story.tsx

@@ -1,6 +1,9 @@
 import { Table, TableRow, TableBody, TableHead, TableCell } from './';
 import { Link } from '../Link';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'components/Table',
+};
 
 const data = {
   items: [
@@ -221,6 +224,4 @@ const GitHubTable = () => {
   );
 };
 
-const stories = storiesOf('Components/Table', module);
-
-stories.add('github table', () => <GitHubTable />);
+export const Example = () => <GitHubTable />;

package/src/Text/Text.story.tsx

@@ -1,8 +1,11 @@
 import { Text } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 // import './styles.css';
 
+export default {
+  title: 'components/Text',
+};
+
 const Example = () => {
   const variantMapping = {
     h1: 'Heading 1',
@@ -34,6 +37,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Text', module);
-
-stories.add('all variants', () => <Example />);
+export const AllVariants = () => <Example />;

package/src/TextField/TextField.story.tsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
-import { TextField } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
 import { Select, SelectItem } from '../';
 import { Button } from '../Button';
 import { alpha } from '../color';
+import { TextField } from './';
+
+export default {
+  title: 'components/TextField',
+};
 
 const Example = ({ variant }) => {
   const [error, setError] = useState<boolean | string>(false);
@@ -220,7 +223,5 @@ const Example = ({ variant }) => {
   );
 };
 
-const stories = storiesOf('Components/TextField', module);
-
-stories.add('filled', () => <Example variant="filled" />);
-stories.add('outlined', () => <Example variant="outlined" />);
+export const Filled = () => <Example variant="filled" />;
+export const Outlined = () => <Example variant="outlined" />;

package/src/Tooltip/Tooltip.story.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Tooltip } from './';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/Tooltip',
+};
+
 const Example = () => {
   const buttonRef = useRef();
   const [counter, setCounter] = useState(0);
@@ -28,6 +31,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Tooltip', module);
-
-stories.add('controlled', () => <Example />);
+export const Default = () => <Example />;

package/src/hooks/useAnimation.ts

@@ -43,51 +43,61 @@ export function useAnimation<
   });
 
   const handleClose = useCallback(() => {
-    setAnimation((animation) => ({
-      ...animation,
-      state: 'close',
-      style: animationStyle.close || animationStyle.closed,
-      timing: closeTimeoutInMilliseconds,
-    }));
-
-    return setTimeout(() => {
-      setAnimation({
-        state: 'closed',
-        style: animationStyle.closed,
-        open: false,
-        timing: closeTimeoutInMilliseconds,
-      });
-    }, closeTimeoutInMilliseconds);
+    setAnimation((animation) =>
+      animation.state === 'closed'
+        ? animation
+        : {
+            ...animation,
+            state: 'close',
+            style: animationStyle.close || animationStyle.closed,
+            timing: closeTimeoutInMilliseconds,
+          }
+    );
   }, [animationStyle, closeTimeoutInMilliseconds]);
 
   const handleOpen = useCallback(() => {
-    setAnimation((animation) => ({
-      ...animation,
-      open: true,
-      state: 'opening',
-      style: animationStyle.opening || animationStyle.closed,
-    }));
-    return requestAnimationFrame(() => {
+    setAnimation((animation) =>
+      animation.state === 'open'
+        ? animation
+        : {
+            ...animation,
+            open: true,
+            state: 'opening',
+            style: animationStyle.opening || animationStyle.closed,
+          }
+    );
+  }, [animationStyle]);
+
+  useEffect(() => {
+    if (state === 'opening') {
       setAnimation((animation) => ({
         ...animation,
         state: 'open',
         style: animationStyle.open,
         timing: openTimeoutInMilliseconds,
       }));
-    });
-  }, [animationStyle, openTimeoutInMilliseconds]);
+    }
+  }, [animationStyle.open, openTimeoutInMilliseconds, state]);
+
+  useEffect(() => {
+    if (state === 'close') {
+      const timeout = setTimeout(() => {
+        setAnimation({
+          state: 'closed',
+          style: animationStyle.closed,
+          open: false,
+          timing: closeTimeoutInMilliseconds,
+        });
+      }, closeTimeoutInMilliseconds);
+      return () => clearTimeout(timeout);
+    }
+  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);
 
   useEffect(() => {
     if (openProp) {
-      const frameHandler = handleOpen();
-      return () => {
-        cancelAnimationFrame(frameHandler);
-      };
+      handleOpen();
     } else {
-      const timeoutHandler = handleClose();
-      return () => {
-        clearTimeout(timeoutHandler);
-      };
+      handleClose();
     }
   }, [handleClose, handleOpen, openProp]);