@basic-ui/material 0.1.10 → 0.1.13

package/build/cjs/index.js

@@ -560,16 +560,22 @@ const ColorModeProvider = props => {
   }, [setColorMode]);
   const globalStyles = react$1.useMemo(() => {
     const ret = {
-      body: styles['default'] || {}
+      body: _extends__default['default']({
+        colorScheme: 'light'
+      }, styles['default'] || {})
     };
-    ret[`.${DEFAULT_THEME_CLASS}`] = styles['default'] || {};
+    ret[`.${DEFAULT_THEME_CLASS}`] = _extends__default['default']({
+      colorScheme: 'light'
+    }, styles['default'] || {});
 
     for (const key in styles) {
       if (key === 'default') {
         continue;
       }
 
-      ret[`.${DARK_THEME_CLASS}`] = styles[key];
+      ret[`.${DARK_THEME_CLASS}`] = _extends__default['default']({
+        colorScheme: 'dark'
+      }, styles[key]);
     }
 
     return ret;
@@ -930,11 +936,9 @@ const opacityIn = react.keyframes({
 });
 const opacityOut = react.keyframes({
   from: {
-    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,
     opacity: `var(${RIPPLE_OPACITY_END})`
   },
   to: {
-    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,
     opacity: '0'
   }
 });
@@ -1005,7 +1009,7 @@ const useRipple = opts => {
 
   react$1.useEffect(() => {
     return () => {
-      clearTimeout(restartTimeout.current);
+      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
       clearTimeout(enteringTimeout.current);
       clearTimeout(leavingTimeout.current);
     };
@@ -1046,11 +1050,11 @@ const useRipple = opts => {
     shouldLeave.current = false;
     rippleState.current = 'restart';
     setRipple(_extends__default['default']({}, defaultRipple));
-    restartTimeout.current = window.setTimeout(() => {
+    restartTimeout.current = requestAnimationFrame(() => {
       rippleState.current = 'entering';
       setRipple(calculateRipplePosition(rect, clientX, clientY, center));
       enteringTimeout.current = window.setTimeout(setEntered, enterDuration);
-    }, 16);
+    });
   }; // Styling
 
 
@@ -1063,7 +1067,7 @@ const useRipple = opts => {
       break;
 
     case 'leaving':
-      animation = `${opacityOut} ${leaveDuration}ms forwards`;
+      animation = `${radiusIn} ${enterDuration}ms forwards,` + `${opacityOut} ${leaveDuration}ms forwards`;
       break;
   }
 
@@ -1600,45 +1604,46 @@ function useAnimation(opts) {
     open: openProp
   });
   const handleClose = react$1.useCallback(() => {
-    setAnimation(animation => _extends__default['default']({}, animation, {
+    setAnimation(animation => animation.state === 'closed' ? animation : _extends__default['default']({}, animation, {
       state: 'close',
       style: animationStyle.close || animationStyle.closed,
       timing: closeTimeoutInMilliseconds
     }));
-    return setTimeout(() => {
-      setAnimation({
-        state: 'closed',
-        style: animationStyle.closed,
-        open: false,
-        timing: closeTimeoutInMilliseconds
-      });
-    }, closeTimeoutInMilliseconds);
   }, [animationStyle, closeTimeoutInMilliseconds]);
   const handleOpen = react$1.useCallback(() => {
-    setAnimation(animation => _extends__default['default']({}, animation, {
+    setAnimation(animation => animation.state === 'open' ? animation : _extends__default['default']({}, animation, {
       open: true,
       state: 'opening',
       style: animationStyle.opening || animationStyle.closed
     }));
-    return requestAnimationFrame(() => {
+  }, [animationStyle]);
+  react$1.useEffect(() => {
+    if (state === 'opening') {
       setAnimation(animation => _extends__default['default']({}, animation, {
         state: 'open',
         style: animationStyle.open,
         timing: openTimeoutInMilliseconds
       }));
-    });
-  }, [animationStyle, openTimeoutInMilliseconds]);
+    }
+  }, [animationStyle.open, openTimeoutInMilliseconds, state]);
+  react$1.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]);
   react$1.useEffect(() => {
     if (openProp) {
-      const frameHandler = handleOpen();
-      return () => {
-        cancelAnimationFrame(frameHandler);
-      };
+      handleOpen();
     } else {
-      const timeoutHandler = handleClose();
-      return () => {
-        clearTimeout(timeoutHandler);
-      };
+      handleClose();
     }
   }, [handleClose, handleOpen, openProp]);
   return {
@@ -1661,7 +1666,7 @@ const styles = {
     },
     close: {
       opacity: 0,
-      transform: 'translateY(100%)'
+      transform: 'translateY(10%)'
     }
   },
   grow: {