@shopify/shop-minis-react/dist/hooks/navigation/useViewTransitions.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import { useEffect as a } from "react";
import { useLocation as u, useNavigationType as m } from "../../shop-minis-react/node_modules/.pnpm/react-router@7.7.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-router/dist/development/chunk-EF7DTUVF.js";
import { DATA_NAVIGATION_TYPE_ATTRIBUTE as e, NAVIGATION_TYPES as t } from "../../types/index.js";
function p() {
  const r = u(), n = m();
  a(() => {
    let o = !1;
    const i = () => {
      o = !0, document.startViewTransition && document.startViewTransition(() => {
        document.documentElement.setAttribute(
          e,
          t.backward
        );
      }).finished.then(() => {
        document.documentElement.removeAttribute(
          e
        );
      }).catch((c) => {
        console.error("View transition error:", c);
      });
    }, s = (d) => {
      d.hasUAVisualTransition && !o && document.documentElement.setAttribute(
        e,
        t.none
      );
    };
    return window.addEventListener("androidbackpressed", i), window.addEventListener("popstate", s), () => {
      window.removeEventListener("popstate", s), window.removeEventListener("androidbackpressed", i);
    };
  }, [r]), a(() => (document.documentElement.getAttribute(
    e
  ) || (n === "PUSH" ? document.documentElement.setAttribute(
    e,
    t.forward
  ) : n === "POP" && document.documentElement.setAttribute(
    e,
    t.backward
  )), () => {
    document.documentElement.removeAttribute(e);
  }), [n, r]);
}
export {
  p as useViewTransitions
};
//# sourceMappingURL=useViewTransitions.js.map