@basic-ui/material 0.1.9 → 0.1.12

package/src/Ripple/keyframes.ts

@@ -27,11 +27,9 @@ export const opacityIn: Keyframes = keyframes({
 
 export const opacityOut: Keyframes = 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',
   },
 });

package/src/Ripple/useRipple.ts

@@ -105,7 +105,7 @@ export const useRipple = (opts: RippleOptions) => {
   // clear timeouts to avoid setting state on unmounted component
   useEffect(() => {
     return () => {
-      clearTimeout(restartTimeout.current);
+      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
       clearTimeout(enteringTimeout.current);
       clearTimeout(leavingTimeout.current);
     };
@@ -157,12 +157,12 @@ export const useRipple = (opts: RippleOptions) => {
 
     rippleState.current = 'restart';
     setRipple({ ...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
@@ -175,7 +175,9 @@ export const useRipple = (opts: RippleOptions) => {
         `${opacityIn} ${enterDuration / 3}ms forwards`;
       break;
     case 'leaving':
-      animation = `${opacityOut} ${leaveDuration}ms forwards`;
+      animation =
+        `${radiusIn} ${enterDuration}ms forwards,` +
+        `${opacityOut} ${leaveDuration}ms forwards`;
       break;
   }
 

package/src/Snackbar/Stack.tsx

@@ -200,6 +200,7 @@ interface StackItem {
 }
 
 export const StackProvider: FC<{
+  children?: React.ReactNode | React.ReactNode[];
   gap?: number;
   placement?:
     | 'top-right'