unframer 2.8.0 → 2.9.1

package/src/react.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { combinedCSSRules, LayoutGroup } from './framer.js'
+import { combinedCSSRules, LayoutGroup, MotionConfig } from './framer.js'
 
 import {
     ComponentPropsWithoutRef,
@@ -142,30 +142,42 @@ export const WithFramerBreakpoints = forwardRef(function WithFramerBreakpoints<
             return ''
         },
     )
+    const allBreakpoints = fillBreakpoints(_breakpointsMap)
+    const variants = new Map<
+        string,
+        { className: string; variant: string; breakpoints: string[] }
+    >()
+    for (let breakpointName of Object.keys(allBreakpoints)) {
+        const realVariant = allBreakpoints[breakpointName]
+        if (!realVariant) {
+            continue
+        }
 
-    const parts = useMemo(() => {
-        const allBreakpoints = fillBreakpoints(_breakpointsMap)
-        const variants = {} as Record<
-            string,
-            { className: string; variant: string }
-        >
-        for (let breakpointName of Object.keys(allBreakpoints)) {
-            const realVariant = allBreakpoints[breakpointName]
-            if (!realVariant) {
-                continue
-            }
-            if (currentBreakpoint && currentBreakpoint !== breakpointName) {
-                continue
-            }
-
-            let className = classNames(
-                variants[realVariant]?.className || 'unframer-hidden',
+        const existingVariant = variants.get(realVariant)
+        if (existingVariant) {
+            existingVariant.breakpoints.push(breakpointName)
+            existingVariant.className = classNames(
+                existingVariant.className,
                 `unframer-${breakpointName}`,
             )
-            variants[realVariant] = { className, variant: realVariant }
+        } else {
+            variants.set(realVariant, {
+                className: classNames(
+                    'unframer-hidden',
+                    `unframer-${breakpointName}`,
+                ),
+                variant: realVariant,
+                breakpoints: [breakpointName],
+            })
         }
-
-        return Object.values(variants).map(({ className, variant }) => {
+    }
+    const parts = [...variants.values()].map(
+        ({ className, breakpoints, variant }) => {
+            const shouldShow =
+                !currentBreakpoint || breakpoints.includes(currentBreakpoint)
+            if (!shouldShow) {
+                return null
+            }
             return (
                 <div key={variant} className={className}>
                     {/* @ts-ignore */}
@@ -182,8 +194,8 @@ export const WithFramerBreakpoints = forwardRef(function WithFramerBreakpoints<
                     />
                 </div>
             )
-        })
-    }, [currentBreakpoint, rest, _breakpointsMap])
+        },
+    )
 
     return parts
 })
@@ -192,3 +204,63 @@ const onResize = (callback) => {
     window.addEventListener('resize', callback)
     return () => window.removeEventListener('resize', callback)
 }
+
+const onResizeWithDebounce = (callback) => {
+    let timeoutId
+    const debouncedCallback = () => {
+        clearTimeout(timeoutId)
+        timeoutId = setTimeout(() => {
+            callback()
+        }, 16)
+    }
+    window.addEventListener('resize', debouncedCallback)
+    return () => {
+        clearTimeout(timeoutId)
+        window.removeEventListener('resize', debouncedCallback)
+    }
+}
+
+import {
+    // @ts-ignore
+    CustomCursorHost,
+    // @ts-ignore
+    FetchClientProvider,
+    // @ts-ignore
+    FormContext,
+    // @ts-ignore
+    Router,
+} from './framer.js'
+
+export function ContextProviders({
+    locale,
+    children,
+    framerSiteId,
+    routes,
+    routeId,
+    pathVariables,
+    collectionUtils,
+    locales,
+}) {
+    const localeId = locales?.find(
+        (l) => l.slug === locale || l.code === locale || l.id === locale,
+    )?.id
+    return (
+        <FetchClientProvider>
+            <CustomCursorHost>
+                <FormContext.Provider value={framerSiteId}>
+                    <Router
+                        initialRoute={routeId}
+                        initialPathVariables={pathVariables}
+                        initialLocaleId={localeId}
+                        enableImproveInpDuringHydration={true}
+                        routes={routes}
+                        collectionUtils={collectionUtils}
+                        locales={locales}
+                    >
+                        {children}
+                    </Router>
+                </FormContext.Provider>
+            </CustomCursorHost>
+        </FetchClientProvider>
+    )
+}