reshaped 3.10.2 → 3.10.3

package/dist/components/Overlay/Overlay.js

@@ -5,13 +5,14 @@ import { classNames } from "@reshaped/headless";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
-import { onNextFrame } from "../../utilities/animation.js";
+import { checkTransitions, onNextFrame } from "../../utilities/animation.js";
 import s from "./Overlay.module.css";
 const Overlay = (props) => {
     const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, contained, className, attributes, } = props;
     // Selectors wrapped with refs to simplify working with useEffect dependency array
     const onCloseRef = useHandlerRef(onClose);
     const onOpenRef = useHandlerRef(onOpen);
+    const onAfterCloseRef = useHandlerRef(onAfterClose);
     const isTransparent = transparent === true;
     const opacity = isTransparent ? 0 : (1 - (transparent || 0)) * 0.7;
     const [mounted, setMounted] = React.useState(false);
@@ -74,21 +75,28 @@ const Overlay = (props) => {
         Escape: () => close({ reason: "escape-key" }),
     }, [close]);
     React.useEffect(() => {
-        setAnimated(true);
+        const hasTransitions = checkTransitions();
+        if (hasTransitions)
+            setAnimated(true);
         if (active && !rendered)
             render();
-        if (!active && rendered)
+        if (!active && rendered) {
+            if (!hasTransitions) {
+                unlockScroll();
+                remove();
+                onAfterCloseRef.current?.();
+                return;
+            }
             hide();
-    }, [active, render, hide, rendered]);
+        }
+    }, [active, render, hide, rendered, remove, unlockScroll, onAfterCloseRef]);
     // Show overlay after it was rendered
     React.useEffect(() => {
         if (!rendered)
             return;
         if (!isTransparent)
             lockScroll();
-        onNextFrame(() => {
-            show();
-        });
+        onNextFrame(() => show());
     }, [rendered, show, lockScroll, isTransparent]);
     React.useEffect(() => {
         if (!rendered || !contentRef.current)

package/dist/components/Tabs/TabsList.js

@@ -7,6 +7,7 @@ import Icon from "../Icon/index.js";
 import useFadeSide from "../../hooks/_private/useFadeSide.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
+import { checkTransitions } from "../../utilities/animation.js";
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext.js";
 import TabsItem from "./TabsItem.js";
@@ -88,7 +89,7 @@ const TabsList = (props) => {
         const selectionStyle = getElementSelectionStyle(elActiveRef.current);
         if (!selectionStyle)
             return;
-        setSelection({ ...selectionStyle, status: "animated" });
+        setSelection({ ...selectionStyle, status: checkTransitions() ? "animated" : "idle" });
     }, [selection]);
     return (_jsxs("div", { ...attributes, className: rootClassNames, children: [_jsx("div", { className: s.inner, ref: elScrollableRef, children: _jsxs("div", { className: s.list, role: "tablist", children: [React.Children.map(children, (child, index) => {
                             if (!React.isValidElement(child))

package/dist/components/Toast/ToastContainer.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TrapFocus, classNames } from "@reshaped/headless";
 import { checkKeyboardMode } from "@reshaped/headless/internal";
 import React from "react";
-import { onNextFrame } from "../../utilities/animation.js";
+import { checkTransitions, onNextFrame } from "../../utilities/animation.js";
 import Toast from "./Toast.js";
 import { timeouts } from "./Toast.constants.js";
 import ToastContext from "./Toast.context.js";
@@ -29,9 +29,13 @@ const ToastContainer = (props) => {
         if (timeout === 0)
             return;
         timeoutRef.current = setTimeout(() => {
+            if (!checkTransitions()) {
+                remove(id);
+                return;
+            }
             hide(id);
         }, timeoutValue ?? timeouts.short);
-    }, [hide, id, timeout, stopTimer]);
+    }, [hide, id, remove, timeout, stopTimer]);
     const handleTransitionEnd = (e) => {
         if (e.propertyName !== "height")
             return;

package/dist/components/_private/Expandable/Expandable.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useIsomorphicLayoutEffect } from "@reshaped/headless";
 import { classNames } from "@reshaped/headless";
 import React from "react";
-import { onNextFrame } from "../../../utilities/animation.js";
+import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
 import s from "./Expandable.module.css";
 const Expandable = (props) => {
     const { children, active, attributes } = props;
@@ -27,6 +27,10 @@ const Expandable = (props) => {
         const rootEl = rootRef.current;
         if (!rootEl || !mountedRef.current)
             return;
+        if (!checkTransitions()) {
+            setAnimatedHeight(active ? "auto" : null);
+            return;
+        }
         if (active) {
             rootEl.style.height = "auto";
             requestAnimationFrame(() => {

package/dist/utilities/animation.js

@@ -4,6 +4,7 @@ export const onNextFrame = (cb) => {
     });
 };
 const transitionAttribute = "data-rs-no-transition";
+const reducedMotionMediaQuery = "(prefers-reduced-motion: reduce)";
 export const disableTransitions = () => {
     document.documentElement.setAttribute(transitionAttribute, "true");
 };
@@ -13,7 +14,7 @@ export const enableTransitions = () => {
 export const checkTransitions = () => {
     if (document.documentElement.hasAttribute(transitionAttribute))
         return false;
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function")
         return false;
-    return true;
+    return !window.matchMedia(reducedMotionMediaQuery).matches;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.10.2",
+  "version": "3.10.3",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -92,7 +92,7 @@
     "csstype": "3.2.3",
     "culori": "4.0.2",
     "postcss-custom-media": "12.0.1",
-    "@reshaped/headless": "3.10.2"
+    "@reshaped/headless": "3.10.3"
   },
   "scripts": {
     "clean": "bash ./bin/clean.sh",