@obosbbl/grunnmuren-react 3.3.1 → 3.3.2

package/dist/index.d.mts

@@ -165,7 +165,7 @@ declare function Breadcrumbs(props: BreadcrumbsProps): react_jsx_runtime.JSX.Ele
  */
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
-    color?: "mint" | "white" | "blue" | undefined;
+    color?: "blue" | "mint" | "white" | undefined;
     isIconOnly?: boolean | undefined;
     isPending?: boolean | undefined;
 } & ({
@@ -192,7 +192,7 @@ type CardProps = VariantProps<typeof cardVariants> & HTMLAttributes<HTMLDivEleme
 };
 declare const cardVariants: (props?: ({
     variant?: "subtle" | "outlined" | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
+    layout?: "vertical" | "horizontal" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;
@@ -349,7 +349,7 @@ type MediaProps = HTMLProps<HTMLDivElement> & VariantProps<typeof mediaVariant>
     ref?: Ref<HTMLDivElement>;
 };
 declare const mediaVariant: (props?: ({
-    fit?: "contain" | "cover" | undefined;
+    fit?: "cover" | "contain" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;

package/dist/index.mjs

@@ -975,6 +975,27 @@ const cardLinkVariants = cva({
     });
 };
 
+/**
+ * Hook that detects the user's preference for reduced motion.
+ *
+ * Keep in mind that this hook relies on a browser API's and doesn't run on the server.
+ * You can supply an initial value that will be used for server side rendering.
+ */ function usePrefersReducedMotion(initialValue = true) {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(initialValue);
+    useEffect(()=>{
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        setPrefersReducedMotion(mediaQuery.matches);
+        const changeListener = (event)=>{
+            setPrefersReducedMotion(event.matches);
+        };
+        mediaQuery.addEventListener('change', changeListener);
+        return ()=>{
+            mediaQuery.removeEventListener('change', changeListener);
+        };
+    }, []);
+    return prefersReducedMotion;
+}
+
 const Carousel = ({ className, children, onChange, ...rest })=>{
     const carouselRef = useRef(null);
     const carouselItemsRef = useRef(null);
@@ -986,6 +1007,7 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
     const scrollQueue = useRef([]);
     const [hasReachedScrollStart, setHasReachedScrollStart] = useState(scrollTargetIndex === 0);
     const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
+    const prefersReducedMotion = usePrefersReducedMotion();
     useEffect(()=>{
         setHasReachedScrollStart(scrollTargetIndex === 0);
         setHasReachedScrollEnd(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
@@ -1017,7 +1039,6 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
         }
         isScrollingProgrammatically.current = true;
         const elementWithFocusVisible = carouselRef.current?.querySelector(':focus-visible');
-        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
         carouselItemsRef.current.children[scrollTargetIndex]?.scrollIntoView({
             behavior: prefersReducedMotion ? 'instant' : 'smooth',
             inline: 'start',
@@ -1066,7 +1087,8 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
             processQueue(); // Process any queued scrolls
         }, 500);
     }, [
-        scrollTargetIndex
+        scrollTargetIndex,
+        prefersReducedMotion
     ]);
     // Clean up timeout on unmount
     useEffect(()=>{
@@ -1221,16 +1243,7 @@ const CarouselItemsContext = /*#__PURE__*/ createContext({
 });
 const CarouselItems = ({ className, children })=>{
     const { carouselItemsRef, onScroll, activeIndex, handlePrevious, handleNext } = useContext(CarouselItemsContext);
-    const prefersReducedMotion = useRef(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
-    // Update the ref when the media query changes
-    useEffect(()=>{
-        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-        const handleChange = (e)=>{
-            prefersReducedMotion.current = e.matches;
-        };
-        mediaQuery.addEventListener('change', handleChange);
-        return ()=>mediaQuery.removeEventListener('change', handleChange);
-    }, []);
+    const prefersReducedMotion = usePrefersReducedMotion();
     const handleKeyDown = (event)=>{
         // Prevent default behavior when holding down arrow keys (when repeat is true)
         // The default behavior in scroll snapping causes a staggering scroll effect that feels janky
@@ -1239,7 +1252,7 @@ const CarouselItems = ({ className, children })=>{
             return;
         }
         // For users with prefers-reduced-motion, trigger button click behavior instead of native scroll
-        if (prefersReducedMotion.current) {
+        if (prefersReducedMotion) {
             if (event.key === 'ArrowLeft' && handlePrevious) {
                 event.preventDefault();
                 handlePrevious();
@@ -2868,15 +2881,14 @@ const VideoLoop = ({ src, format, alt, className })=>{
     const [shouldPlay, setShouldPlay] = useState(false);
     // Needed to show the pause button when the video is actually playing (refer to google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
     const [isPlaying, setIsPlaying] = useState(false);
-    // We need to check if the user prefers reduced motion, so that we can prevent the video from autoplaying if so
-    const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(null);
+    const prefersReducedMotion = usePrefersReducedMotion(null);
     const videoRef = useRef(null);
     useEffect(()=>{
-        const { matches: userPrefersReducedMotion } = matchMedia('(prefers-reduced-motion: reduce)');
-        setUserPrefersReducedMotion(userPrefersReducedMotion);
         // Autoplay the video if the user does not prefer reduced motion
-        setShouldPlay(!userPrefersReducedMotion);
-    }, []);
+        setShouldPlay(!prefersReducedMotion);
+    }, [
+        prefersReducedMotion
+    ]);
     // Follow google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
     // "Don't assume a video will play, and don't show a pause button when the video is not actually playing."
     // "You should always look at the Promise returned by the play function to see if it was rejected:"
@@ -2893,7 +2905,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
         shouldPlay
     ]);
     return /*#__PURE__*/ jsxs("div", {
-        className: cx(className, 'relative', userPrefersReducedMotion === null && 'opacity-0'),
+        className: cx(className, 'relative', prefersReducedMotion === null && 'opacity-0'),
         children: [
             /*#__PURE__*/ jsx("video", {
                 "aria-hidden": true,
@@ -2901,11 +2913,11 @@ const VideoLoop = ({ src, format, alt, className })=>{
                 // cursor-pointer is not working on the button below, so we add it here for the same effect
                 className: "h-full max-h-[inherit] w-full cursor-pointer rounded-[inherit] object-cover",
                 playsInline: true,
-                loop: userPrefersReducedMotion === false,
-                autoPlay: userPrefersReducedMotion === false,
+                loop: prefersReducedMotion === false,
+                autoPlay: prefersReducedMotion === false,
                 muted: true,
                 onEnded: (event)=>{
-                    if (userPrefersReducedMotion) {
+                    if (prefersReducedMotion) {
                         // Reset the video to the beginning if the user prefers reduced motion, since the video will not loop
                         event.currentTarget.currentTime = 0;
                         setShouldPlay(false);
@@ -2917,7 +2929,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
                     type: `video/${format}`
                 })
             }),
-            userPrefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
+            prefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
                 "data-slot": "video-loop-button",
                 "aria-hidden": true,
                 type: "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"