@basic-ui/material 0.1.10 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -14,18 +14,20 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "start": "yarn run -T start-storybook -p 9001 -c ./scripts/storybook",
     "build": "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",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "format": "prettier --write '**/*.js'",
+    "start": "yarn run -T start-storybook -p 9001 -c ./scripts/storybook",
+    "serve": "http-server .out",
     "typecheck": "tsc --noEmit",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.35",
+    "@basic-ui/core": "^0.0.36",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -33,8 +35,8 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@emotion/react": "11.1.5",
-    "@emotion/styled": "11.1.5",
+    "@emotion/react": "11.9.0",
+    "@emotion/styled": "11.8.1",
     "polished": "^4.1.1"
   },
   "peerDependencies": {
@@ -44,9 +46,9 @@
     "@emotion/styled": "11.x",
     "@styled-system/css": "*",
     "polished": ">=3.0.0",
-    "react": ">=16.14.0 || >=17.0.0",
-    "react-dom": ">=16.14.0 || >=17.0.0",
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-spring": "^9.0.0"
   },
-  "gitHead": "cbc74c92645db81f0f66c4bb52c69bf3f769bdcd"
+  "gitHead": "6fe8c9cf2cff7546aeb8c6d0b700f78f9ba6e1a5"
 }

package/src/ColorMode/ColorModeProvider.tsx

@@ -65,14 +65,20 @@ export const ColorModeProvider: React.FC<ColorModeProviderProps> = (props) => {
   }, [setColorMode]);
 
   const globalStyles = useMemo(() => {
-    const ret = { body: styles['default'] || {} };
-    ret[`.${DEFAULT_THEME_CLASS}`] = styles['default'] || {};
+    const ret = {
+      body: { colorScheme: 'light', ...(styles['default'] || {}) },
+    };
+
+    ret[`.${DEFAULT_THEME_CLASS}`] = {
+      colorScheme: 'light',
+      ...(styles['default'] || {}),
+    };
 
     for (const key in styles) {
       if (key === 'default') {
         continue;
       }
-      ret[`.${DARK_THEME_CLASS}`] = styles[key];
+      ret[`.${DARK_THEME_CLASS}`] = { colorScheme: 'dark', ...styles[key] };
     }
 
     return ret;

package/src/Dialog/useDialogAnimation.tsx

@@ -4,7 +4,7 @@ const styles = {
   slide: {
     closed: { opacity: 0.6, transform: 'translateY(100%)' },
     open: { opacity: 1, transform: 'translateY(0%)' },
-    close: { opacity: 0, transform: 'translateY(100%)' },
+    close: { opacity: 0, transform: 'translateY(10%)' },
   },
   grow: {
     closed: { opacity: 0.8, transform: 'scale(0.8)' },

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'

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