@micromag/core 0.4.60 → 0.4.63

package/es/components.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React, { CSSProperties, MouseEventHandler, ForwardedRef } from 'react';
 
+type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
 interface ButtonProps {
-    type?: string;
+    type?: 'button' | 'submit' | 'reset';
     theme?: ButtonTheme | null;
     size?: ButtonSize | null;
     href?: string | null;
@@ -26,13 +27,12 @@ interface ButtonProps {
     withoutTheme?: boolean;
     outline?: boolean;
     asLink?: boolean;
+    style?: CSSProperties;
     className?: string | null;
     iconClassName?: string | null;
     labelClassName?: string | null;
-    onClick?: ((...args: unknown[]) => void) | null;
-    refButton?: ((...args: unknown[]) => void | {
-        current?: unknown;
-    }) | null;
+    onClick?: MouseEventHandler<ButtonElement> | null;
+    refButton?: ForwardedRef<ButtonElement> | null;
 }
 declare function Button$2({ type, theme, size, href, external, direct, target, label, children, focusable, active, icon, iconPosition, disabled, loading, disableOnLoading, small, big, withShadow, withoutStyle, withoutBootstrapStyles, withoutTheme, asLink, outline, onClick, className, iconClassName, labelClassName, refButton, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 

package/es/components.js

@@ -158,12 +158,12 @@ function Button$1(_ref) {
       disabled: disabled
     }, styles$y.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/jsx("a", _objectSpread(_objectSpread({}, props), {}, {
-      href: disabled ? null : href,
+      href: !disabled ? href : undefined,
       className: linkClassNames,
       onClick: onClick,
-      target: external ? target : null,
+      target: external ? target : undefined,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1',
+      tabIndex: !focusable ? -1 : undefined,
       children: content
     })) : /*#__PURE__*/jsx(Link$1, {
       href: href,
@@ -180,7 +180,7 @@ function Button$1(_ref) {
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
-    tabIndex: focusable ? '0' : '-1',
+    tabIndex: !focusable ? -1 : undefined,
     children: content
   }));
 }

package/es/contexts.d.ts

@@ -354,14 +354,42 @@ interface PanelsProviderProps {
 }
 declare function PanelsProvider({ children, container: initialContainer }: PanelsProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const PlaybackContext: any;
-declare const usePlaybackContext: () => unknown;
+interface PlaybackControlsTheme {
+    seekBarOnly?: boolean;
+    color?: unknown;
+    progressColor?: unknown;
+}
+type MediaElement = HTMLVideoElement | HTMLAudioElement | HTMLMediaElement;
+interface PlaybackContext {
+    playing: boolean;
+    completed: boolean;
+    muted: boolean;
+    controls: boolean;
+    controlsSuggestPlay: boolean;
+    controlsVisible: boolean;
+    media: MediaElement | null;
+    hasAudio: boolean | null;
+    controlsTheme: PlaybackControlsTheme | null;
+    currentQualityLevel: number | null;
+    setMuted: (muted: boolean) => void;
+    setPlaying: (playing: boolean) => void;
+    setControls: (hasControls: boolean) => void;
+    setControlsVisible: (visible: boolean) => void;
+    setControlsTheme: (theme: PlaybackControlsTheme | null) => void;
+    showControls: () => void;
+    hideControls: () => void;
+    setMedia: (media: MediaElement | null) => void;
+    setCurrentQualityLevel: (qualityLevel: number | null, fromRef?: MediaElement | null) => void;
+    setIsBackground: (isBackground: boolean) => void;
+}
+declare const PlaybackContext: React.Context<PlaybackContext>;
+declare const usePlaybackContext: () => PlaybackContext;
 declare const usePlaybackMediaRef: (active?: boolean, background?: boolean, updateKey?: any) => {
     ref: React.RefObject<HTMLMediaElement>;
     isCurrent: boolean;
 };
 interface PlaybackProviderProps {
-    children: React__default.ReactNode;
+    children: ReactNode;
     controls?: boolean;
     controlsSuggestPlay?: boolean;
     controlsVisible?: boolean;
@@ -373,7 +401,7 @@ interface PlaybackProviderProps {
     muted?: boolean;
     playing?: boolean;
     paused?: boolean;
-    currentQualityLevel?: number;
+    currentQualityLevel?: number | null;
 }
 declare function PlaybackProvider({ muted: initialMuted, playing: initialPlaying, paused, controls: initialControls, controlsSuggestPlay: initialControlsSuggestPlay, controlsVisible: initialControlsVisible, controlsTheme: initialControlsTheme, currentQualityLevel: initialCurrentQualityLevel, children, }: PlaybackProviderProps): react_jsx_runtime.JSX.Element;
 

package/es/contexts.js

@@ -1011,30 +1011,28 @@ var defaultControlsThemeValue = {
   color: null,
   progressColor: null
 };
-var defaultValue$1 = {
+var PlaybackContext = /*#__PURE__*/createContext({
   playing: false,
-  paused: false,
   completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
   controlsVisible: false,
+  hasAudio: false,
   media: null,
   controlsTheme: defaultControlsThemeValue,
-  currentQualityLevel: null
-};
-var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
-  setMuted: function setMuted() {},
-  setPlaying: function setPlaying() {},
-  setControls: function setControls() {},
-  setControlsVisible: function setControlsVisible() {},
-  setControlsTheme: function setControlsTheme() {},
+  currentQualityLevel: null,
+  setMuted: function setMuted(muted) {},
+  setPlaying: function setPlaying(playing) {},
+  setControls: function setControls(hasControls) {},
+  setControlsVisible: function setControlsVisible(visible) {},
+  setControlsTheme: function setControlsTheme(theme) {},
   showControls: function showControls() {},
   hideControls: function hideControls() {},
-  setMedia: function setMedia() {},
-  setCurrentQualityLevel: function setCurrentQualityLevel() {},
-  setIsBackground: function setIsBackground() {}
-}));
+  setMedia: function setMedia(media) {},
+  setCurrentQualityLevel: function setCurrentQualityLevel(qualityLevel, fromRef) {},
+  setIsBackground: function setIsBackground(isBackground) {}
+});
 var usePlaybackContext = function usePlaybackContext() {
   return useContext(PlaybackContext);
 };
@@ -1045,29 +1043,35 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
   var _usePlaybackContext = usePlaybackContext(),
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
-    media = _usePlaybackContext.media;
+    media = _usePlaybackContext.media,
+    isBackground = _usePlaybackContext.isBackground;
   var mediaRef = useRef(null);
 
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
   useEffect(function () {
+    var currentMedia = mediaRef.current;
     return function () {
       if (active) {
+        var playing = currentMedia !== null && !!(currentMedia.currentTime > 0 && !currentMedia.paused && !currentMedia.ended && currentMedia.readyState > 2);
         setMedia(null);
         setIsBackground(false);
+        if (playing) {
+          currentMedia.pause();
+        }
       }
     };
   }, [active, setMedia, setIsBackground, updateKey]);
 
   // Register media with context when active and no media is registered
   useEffect(function () {
-    if (!active || mediaRef.current === null || media !== null) {
+    if (!active || mediaRef.current === null || mediaRef.current === media && background === isBackground) {
       return;
     }
     setIsBackground(background);
     setMedia(mediaRef.current);
-  }, [active, background, media, updateKey, setMedia, setIsBackground]);
+  }, [active, background, media, updateKey, setMedia, setIsBackground, isBackground]);
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media

package/es/hooks.d.ts

@@ -46,7 +46,25 @@ declare function useDragProgress({ progress: wantedProgress, onTap, disabled, dr
 declare const useForm: ({ fields: providedFields, injectInFields, ...opts }?: {
     fields?: any[];
     injectInFields?: boolean;
-}) => any;
+}) => {
+    fields: any[];
+    status: any;
+    response: unknown;
+    errors: Record<string, string | string[]>;
+    generalError: string;
+    success: boolean;
+    loading: boolean;
+    error: boolean;
+    value: Record<string, unknown>;
+    setValue: (value: Record<string, unknown>) => void;
+    setErrors: (errors: Record<string, string | string[]>) => void;
+    setGeneralError: (error: string | null) => void;
+    csrfToken: string;
+    submit: (submitValue?: Record<string, unknown>) => void;
+    onSubmit: (e: {
+        preventDefault: () => void;
+    }) => void;
+};
 
 declare const useFormTransition: (initialPaths?: any, initialStyles?: {}) => {
     direction: string;

package/lib/components.js

@@ -160,12 +160,12 @@ function Button$1(_ref) {
       disabled: disabled
     }, styles$y.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/jsxRuntime.jsx("a", _objectSpread(_objectSpread({}, props), {}, {
-      href: disabled ? null : href,
+      href: !disabled ? href : undefined,
       className: linkClassNames,
       onClick: onClick,
-      target: external ? target : null,
+      target: external ? target : undefined,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1',
+      tabIndex: !focusable ? -1 : undefined,
       children: content
     })) : /*#__PURE__*/jsxRuntime.jsx(wouter.Link, {
       href: href,
@@ -182,7 +182,7 @@ function Button$1(_ref) {
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
-    tabIndex: focusable ? '0' : '-1',
+    tabIndex: !focusable ? -1 : undefined,
     children: content
   }));
 }

package/lib/contexts.js

@@ -1011,30 +1011,28 @@ var defaultControlsThemeValue = {
   color: null,
   progressColor: null
 };
-var defaultValue$1 = {
+var PlaybackContext = /*#__PURE__*/React.createContext({
   playing: false,
-  paused: false,
   completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
   controlsVisible: false,
+  hasAudio: false,
   media: null,
   controlsTheme: defaultControlsThemeValue,
-  currentQualityLevel: null
-};
-var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
-  setMuted: function setMuted() {},
-  setPlaying: function setPlaying() {},
-  setControls: function setControls() {},
-  setControlsVisible: function setControlsVisible() {},
-  setControlsTheme: function setControlsTheme() {},
+  currentQualityLevel: null,
+  setMuted: function setMuted(muted) {},
+  setPlaying: function setPlaying(playing) {},
+  setControls: function setControls(hasControls) {},
+  setControlsVisible: function setControlsVisible(visible) {},
+  setControlsTheme: function setControlsTheme(theme) {},
   showControls: function showControls() {},
   hideControls: function hideControls() {},
-  setMedia: function setMedia() {},
-  setCurrentQualityLevel: function setCurrentQualityLevel() {},
-  setIsBackground: function setIsBackground() {}
-}));
+  setMedia: function setMedia(media) {},
+  setCurrentQualityLevel: function setCurrentQualityLevel(qualityLevel, fromRef) {},
+  setIsBackground: function setIsBackground(isBackground) {}
+});
 var usePlaybackContext = function usePlaybackContext() {
   return React.useContext(PlaybackContext);
 };
@@ -1045,29 +1043,35 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
   var _usePlaybackContext = usePlaybackContext(),
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
-    media = _usePlaybackContext.media;
+    media = _usePlaybackContext.media,
+    isBackground = _usePlaybackContext.isBackground;
   var mediaRef = React.useRef(null);
 
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
   React.useEffect(function () {
+    var currentMedia = mediaRef.current;
     return function () {
       if (active) {
+        var playing = currentMedia !== null && !!(currentMedia.currentTime > 0 && !currentMedia.paused && !currentMedia.ended && currentMedia.readyState > 2);
         setMedia(null);
         setIsBackground(false);
+        if (playing) {
+          currentMedia.pause();
+        }
       }
     };
   }, [active, setMedia, setIsBackground, updateKey]);
 
   // Register media with context when active and no media is registered
   React.useEffect(function () {
-    if (!active || mediaRef.current === null || media !== null) {
+    if (!active || mediaRef.current === null || mediaRef.current === media && background === isBackground) {
       return;
     }
     setIsBackground(background);
     setMedia(mediaRef.current);
-  }, [active, background, media, updateKey, setMedia, setIsBackground]);
+  }, [active, background, media, updateKey, setMedia, setIsBackground, isBackground]);
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.4.60",
+    "version": "0.4.63",
     "private": false,
     "description": "",
     "keywords": [
@@ -161,6 +161,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "515ac855ce6094c26f37b1dbf413ee80064713e6",
+    "gitHead": "0a6df1a5352c067c3296377d26fadb9b71244345",
     "types": "es/index.d.ts"
 }