etudes 7.0.3 → 7.2.0

package/components/Video.d.ts

@@ -17,6 +17,7 @@ export type VideoProps = Omit<HTMLAttributes<HTMLVideoElement>, 'autoPlay' | 'co
     onPause?: () => void;
     onPlay?: () => void;
     onSizeChange?: (size?: Size) => void;
+    onTimeUpdate?: (currentTime: number, duration: number) => void;
 };
 export declare const Video: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLVideoElement>, "onCanPlay" | "onEnded" | "onPause" | "onPlay" | "autoPlay" | "controls" | "loop" | "muted" | "playsInline" | "poster"> & {
     autoLoop?: boolean;
@@ -35,4 +36,5 @@ export declare const Video: import("react").ForwardRefExoticComponent<Omit<HTMLA
     onPause?: () => void;
     onPlay?: () => void;
     onSizeChange?: (size?: Size) => void;
+    onTimeUpdate?: (currentTime: number, duration: number) => void;
 } & import("react").RefAttributes<HTMLVideoElement>>;

package/components/Video.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import { useVideoSize } from '../hooks/useVideoSize.js';
-export const Video = forwardRef(({ autoLoop = true, autoPlay = true, hasControls = false, isMuted = true, playsInline = true, posterSrc, src, onCanPlay, onEnd, onFullscreenChange, onLoadMetadata, onLoadMetadataComplete, onLoadMetadataError, onPause, onPlay, onSizeChange, ...props }, ref) => {
+export const Video = forwardRef(({ autoLoop = true, autoPlay = true, hasControls = false, isMuted = true, playsInline = true, posterSrc, src, onCanPlay, onEnd, onFullscreenChange, onLoadMetadata, onLoadMetadataComplete, onLoadMetadataError, onPause, onPlay, onSizeChange, onTimeUpdate, ...props }, ref) => {
     const localRef = useRef(null);
     const videoRef = ref ?? localRef;
     const size = useVideoSize({
@@ -36,7 +36,8 @@ export const Video = forwardRef(({ autoLoop = true, autoPlay = true, hasControls
         onFullscreenChange?.(isFullscreen);
     };
     const canPlayHandler = event => {
-        if (autoPlay && (videoRef.current?.paused ?? false)) {
+        const el = event.currentTarget;
+        if (autoPlay && el.paused) {
             play();
         }
         onCanPlay?.();
@@ -50,6 +51,10 @@ export const Video = forwardRef(({ autoLoop = true, autoPlay = true, hasControls
     const endHandler = event => {
         onEnd?.();
     };
+    const timeUpdateHandler = event => {
+        const el = event.currentTarget;
+        onTimeUpdate?.(el.currentTime, el.duration);
+    };
     const play = () => {
         if (!videoRef.current)
             return;
@@ -60,6 +65,6 @@ export const Video = forwardRef(({ autoLoop = true, autoPlay = true, hasControls
             return;
         videoRef.current.pause();
     };
-    return (_jsx("video", { ...props, ref: ref, autoPlay: autoPlay, controls: hasControls, loop: autoLoop, muted: isMuted, playsInline: playsInline, poster: posterSrc, onCanPlay: canPlayHandler, onEnded: endHandler, onPause: pauseHandler, onPlay: playHandler, children: _jsx("source", { src: src }) }));
+    return (_jsx("video", { ...props, ref: ref, autoPlay: autoPlay, controls: hasControls, loop: autoLoop, muted: isMuted, playsInline: playsInline, poster: posterSrc, onCanPlay: canPlayHandler, onEnded: endHandler, onPause: pauseHandler, onPlay: playHandler, onTimeUpdate: timeUpdateHandler, children: _jsx("source", { src: src }) }));
 });
 Object.defineProperty(Video, 'displayName', { value: 'Video', writable: false });

package/hooks/useClickOutsideEffect.d.ts

@@ -1,2 +1,4 @@
 import { type DependencyList, type RefObject } from 'react';
-export declare function useClickOutsideEffect(targetRef: RefObject<HTMLElement> | RefObject<HTMLElement | undefined> | RefObject<HTMLElement | null>, handler: () => void, deps?: DependencyList): void;
+type TargetRef = RefObject<HTMLElement> | RefObject<HTMLElement | undefined> | RefObject<HTMLElement | null>;
+export declare function useClickOutsideEffect(targetRef: TargetRef | TargetRef[], handler: () => void, deps?: DependencyList): void;
+export {};

package/hooks/useClickOutsideEffect.js

@@ -6,8 +6,10 @@ export function useClickOutsideEffect(targetRef, handler, deps = []) {
                 return;
             let isOutside = true;
             let node = event.target;
+            const targetRefs = [].concat(targetRef);
+            const targetNodes = targetRefs.map(ref => ref.current);
             while (node) {
-                if (node === targetRef.current) {
+                if (targetNodes.find(t => t === node)) {
                     isOutside = false;
                     break;
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "7.0.3",
+  "version": "7.2.0",
   "description": "A study of headless React components",
   "type": "module",
   "scripts": {