@micromag/element-background 0.3.824 → 0.4.4

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-element-background-layer,.micromag-element-background-layers,.micromag-element-background-video,.micromag-element-background-videoContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-element-background-container{overflow:hidden}.micromag-element-background-container:focus video,.micromag-element-background-container:focus-within video{border:3px solid #f3f}.micromag-element-background-layer,.micromag-element-background-layers{z-index:0}.micromag-element-background-right .micromag-element-background-background{left:auto;right:0}.micromag-element-background-bottom .micromag-element-background-background{bottom:0;top:auto}
+.container{overflow:hidden}.container:focus video,.container:focus-within video{border:3px solid #f3f}.layer,.layers,.video,.videoContainer{height:100%;left:0;position:absolute;top:0;width:100%}.layer,.layers{z-index:0}.right .background{left:auto;right:0}.bottom .background{bottom:0;top:auto}

package/es/index.d.ts

@@ -0,0 +1,55 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { BackgroundElement, Color, ImageMedia, VideoMedia } from '@micromag/core';
+
+interface BackgroundLayersProps {
+    width?: number | null;
+    height?: number | null;
+    resolution?: number;
+    background?: BackgroundElement | BackgroundElement[];
+    playing?: boolean;
+    muted?: boolean;
+    children?: React.ReactNode | null;
+    className?: string | null;
+    layerClassName?: string | null;
+    backgroundClassName?: string | null;
+    loadingMode?: string;
+    mediaRef?: ((...args: unknown[]) => void | {
+        current?: unknown;
+    }) | null;
+    shouldLoad?: boolean;
+    withoutVideo?: boolean;
+    onPlayError?: boolean | null;
+    qualityStartLevel?: number | null;
+    onQualityLevelChange?: ((...args: unknown[]) => void) | null;
+}
+declare function BackgroundLayers({ width, height, resolution, background, playing, muted, children, className, layerClassName, backgroundClassName, loadingMode, mediaRef, shouldLoad, withoutVideo, onPlayError, qualityStartLevel, onQualityLevelChange, }: BackgroundLayersProps): react_jsx_runtime.JSX.Element;
+
+interface BackgroundProps {
+    width?: number | null;
+    height?: number | null;
+    resolution?: number;
+    fit?: 'contain' | 'cover' | null;
+    horizontalAlign?: string;
+    verticalAlign?: string;
+    repeat?: boolean;
+    color?: Color | null;
+    media?: ImageMedia | VideoMedia | null;
+    mediaRef?: ((...args: unknown[]) => void | {
+        current?: unknown;
+    }) | null;
+    className?: string | null;
+    playing?: boolean;
+    muted?: boolean;
+    children?: React.ReactNode | null;
+    loadingMode?: string;
+    shouldLoad?: boolean;
+    onPlayError?: ((...args: unknown[]) => void) | null;
+    withoutVideo?: boolean;
+    forceMuted?: boolean;
+    qualityStartLevel?: number | null;
+    onQualityLevelChange?: ((...args: unknown[]) => void) | null;
+}
+declare function Background({ width, height, resolution, fit, horizontalAlign, verticalAlign, repeat, color, media, mediaRef, className, playing, muted, children, loadingMode, shouldLoad, onPlayError, withoutVideo, forceMuted, qualityStartLevel, onQualityLevelChange, }: BackgroundProps): react_jsx_runtime.JSX.Element;
+
+export { Background, BackgroundLayers, BackgroundLayers as default };

package/es/index.js

@@ -2,87 +2,57 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { useRef, useMemo } from 'react';
-import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
 import { getSizeWithinBounds } from '@folklore/size';
 import { useSetting } from '@micromag/core/contexts';
 import Video from '@micromag/element-video';
 
-var styles = {"layers":"micromag-element-background-layers","layer":"micromag-element-background-layer","videoContainer":"micromag-element-background-videoContainer","video":"micromag-element-background-video","container":"micromag-element-background-container","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
+var styles = {"container":"container","videoContainer":"videoContainer","video":"video","layers":"layers","layer":"layer","right":"right","background":"background","bottom":"bottom"};
 
-var propTypes$1 = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  resolution: PropTypes.number,
-  fit: PropTypes.oneOf(['contain', 'cover']),
-  horizontalAlign: PropTypes.string,
-  verticalAlign: PropTypes.string,
-  repeat: PropTypes.bool,
-  color: PropTypes$1.color,
-  media: PropTypes.oneOfType([PropTypes$1.imageMedia, PropTypes$1.videoMedia]),
-  mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    // eslint-disable-next-line react/forbid-prop-types
-    current: PropTypes.any
-  })]),
-  className: PropTypes.string,
-  playing: PropTypes.bool,
-  muted: PropTypes.bool,
-  children: PropTypes.node,
-  loadingMode: PropTypes.string,
-  shouldLoad: PropTypes.bool,
-  onPlayError: PropTypes.func,
-  withoutVideo: PropTypes.bool,
-  forceMuted: PropTypes.bool,
-  qualityStartLevel: PropTypes.number,
-  onQualityLevelChange: PropTypes.func
-};
-var defaultProps$1 = {
-  width: null,
-  height: null,
-  resolution: 1,
-  fit: null,
-  horizontalAlign: 'center',
-  verticalAlign: 'center',
-  repeat: false,
-  color: null,
-  media: null,
-  mediaRef: null,
-  className: null,
-  playing: false,
-  muted: false,
-  children: null,
-  loadingMode: 'lazy',
-  shouldLoad: true,
-  onPlayError: null,
-  withoutVideo: false,
-  forceMuted: false,
-  qualityStartLevel: null,
-  onQualityLevelChange: null
-};
-var Background = function Background(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    resolution = _ref.resolution,
-    fit = _ref.fit,
-    horizontalAlign = _ref.horizontalAlign,
-    verticalAlign = _ref.verticalAlign,
-    repeat = _ref.repeat,
-    color = _ref.color,
-    media = _ref.media,
-    mediaRef = _ref.mediaRef,
-    className = _ref.className,
-    playing = _ref.playing,
-    muted = _ref.muted,
-    children = _ref.children,
-    loadingMode = _ref.loadingMode,
-    shouldLoad = _ref.shouldLoad,
-    onPlayError = _ref.onPlayError,
-    withoutVideo = _ref.withoutVideo,
-    forceMuted = _ref.forceMuted,
-    qualityStartLevel = _ref.qualityStartLevel,
-    onQualityLevelChange = _ref.onQualityLevelChange;
+function Background(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? null : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? null : _ref$height,
+    _ref$resolution = _ref.resolution,
+    resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
+    _ref$fit = _ref.fit,
+    fit = _ref$fit === void 0 ? null : _ref$fit,
+    _ref$horizontalAlign = _ref.horizontalAlign,
+    horizontalAlign = _ref$horizontalAlign === void 0 ? 'center' : _ref$horizontalAlign,
+    _ref$verticalAlign = _ref.verticalAlign,
+    verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
+    _ref$repeat = _ref.repeat,
+    repeat = _ref$repeat === void 0 ? false : _ref$repeat,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? null : _ref$color,
+    _ref$media = _ref.media,
+    media = _ref$media === void 0 ? null : _ref$media,
+    _ref$mediaRef = _ref.mediaRef,
+    mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$playing = _ref.playing,
+    playing = _ref$playing === void 0 ? false : _ref$playing,
+    _ref$muted = _ref.muted,
+    muted = _ref$muted === void 0 ? false : _ref$muted,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$loadingMode = _ref.loadingMode,
+    loadingMode = _ref$loadingMode === void 0 ? 'lazy' : _ref$loadingMode,
+    _ref$shouldLoad = _ref.shouldLoad,
+    shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
+    _ref$onPlayError = _ref.onPlayError,
+    onPlayError = _ref$onPlayError === void 0 ? null : _ref$onPlayError,
+    _ref$withoutVideo = _ref.withoutVideo,
+    withoutVideo = _ref$withoutVideo === void 0 ? false : _ref$withoutVideo,
+    _ref$forceMuted = _ref.forceMuted,
+    forceMuted = _ref$forceMuted === void 0 ? false : _ref$forceMuted,
+    _ref$qualityStartLeve = _ref.qualityStartLevel,
+    qualityStartLevel = _ref$qualityStartLeve === void 0 ? null : _ref$qualityStartLeve,
+    _ref$onQualityLevelCh = _ref.onQualityLevelChange,
+    onQualityLevelChange = _ref$onQualityLevelCh === void 0 ? null : _ref$onQualityLevelCh;
   var _ref2 = media || {},
     _ref2$type = _ref2.type,
     mediaType = _ref2$type === void 0 ? null : _ref2$type,
@@ -174,70 +144,44 @@ var Background = function Background(_ref) {
   })) : null, /*#__PURE__*/React.createElement("div", {
     className: styles.content
   }, children));
-};
-Background.propTypes = propTypes$1;
-Background.defaultProps = defaultProps$1;
+}
 
 var _excluded = ["horizontalAlign", "verticalAlign"];
-var propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  resolution: PropTypes.number,
-  background: PropTypes.oneOfType([PropTypes$1.backgroundElement, PropTypes.arrayOf(PropTypes$1.backgroundElement)]),
-  playing: PropTypes.bool,
-  muted: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  layerClassName: PropTypes.string,
-  backgroundClassName: PropTypes.string,
-  loadingMode: PropTypes.string,
-  mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    // eslint-disable-next-line react/forbid-prop-types
-    current: PropTypes.any
-  })]),
-  shouldLoad: PropTypes.bool,
-  withoutVideo: PropTypes.bool,
-  onPlayError: PropTypes.bool,
-  qualityStartLevel: PropTypes.number,
-  onQualityLevelChange: PropTypes.func
-};
-var defaultProps = {
-  width: null,
-  height: null,
-  resolution: 1,
-  background: [],
-  playing: false,
-  muted: false,
-  children: null,
-  className: null,
-  layerClassName: null,
-  backgroundClassName: null,
-  loadingMode: 'lazy',
-  mediaRef: null,
-  shouldLoad: true,
-  withoutVideo: false,
-  onPlayError: null,
-  qualityStartLevel: null,
-  onQualityLevelChange: null
-};
-var BackgroundLayers = function BackgroundLayers(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    resolution = _ref.resolution,
-    background = _ref.background,
-    playing = _ref.playing,
-    muted = _ref.muted,
-    children = _ref.children,
-    className = _ref.className,
-    layerClassName = _ref.layerClassName,
-    backgroundClassName = _ref.backgroundClassName,
-    loadingMode = _ref.loadingMode,
-    mediaRef = _ref.mediaRef,
-    shouldLoad = _ref.shouldLoad,
-    withoutVideo = _ref.withoutVideo,
-    onPlayError = _ref.onPlayError,
-    qualityStartLevel = _ref.qualityStartLevel,
-    onQualityLevelChange = _ref.onQualityLevelChange;
+function BackgroundLayers(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? null : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? null : _ref$height,
+    _ref$resolution = _ref.resolution,
+    resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? [] : _ref$background,
+    _ref$playing = _ref.playing,
+    playing = _ref$playing === void 0 ? false : _ref$playing,
+    _ref$muted = _ref.muted,
+    muted = _ref$muted === void 0 ? false : _ref$muted,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$layerClassName = _ref.layerClassName,
+    layerClassName = _ref$layerClassName === void 0 ? null : _ref$layerClassName,
+    _ref$backgroundClassN = _ref.backgroundClassName,
+    backgroundClassName = _ref$backgroundClassN === void 0 ? null : _ref$backgroundClassN,
+    _ref$loadingMode = _ref.loadingMode,
+    loadingMode = _ref$loadingMode === void 0 ? 'lazy' : _ref$loadingMode,
+    _ref$mediaRef = _ref.mediaRef,
+    mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
+    _ref$shouldLoad = _ref.shouldLoad,
+    shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
+    _ref$withoutVideo = _ref.withoutVideo,
+    withoutVideo = _ref$withoutVideo === void 0 ? false : _ref$withoutVideo,
+    _ref$onPlayError = _ref.onPlayError,
+    onPlayError = _ref$onPlayError === void 0 ? null : _ref$onPlayError,
+    _ref$qualityStartLeve = _ref.qualityStartLevel,
+    qualityStartLevel = _ref$qualityStartLeve === void 0 ? null : _ref$qualityStartLeve,
+    _ref$onQualityLevelCh = _ref.onQualityLevelChange,
+    onQualityLevelChange = _ref$onQualityLevelCh === void 0 ? null : _ref$onQualityLevelCh;
   var hasSize = width > 0 && height > 0;
   var layers = useMemo(function () {
     return getLayersFromBackground(background);
@@ -289,8 +233,6 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: styles.content
   }, children));
-};
-BackgroundLayers.propTypes = propTypes;
-BackgroundLayers.defaultProps = defaultProps;
+}
 
 export { Background, BackgroundLayers, BackgroundLayers as default };

package/es/styles.css

@@ -0,0 +1 @@
+.container{overflow:hidden}.container:focus video,.container:focus-within video{border:3px solid #f3f}.layer,.layers,.video,.videoContainer{height:100%;left:0;position:absolute;top:0;width:100%}.layer,.layers{z-index:0}.right .background{left:auto;right:0}.bottom .background{bottom:0;top:auto}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-background",
-    "version": "0.3.824",
+    "version": "0.4.4",
     "private": false,
     "description": "",
     "keywords": [
@@ -32,9 +32,11 @@
     "license": "ISC",
     "type": "module",
     "module": "es/index.js",
+    "types": "es/index.d.ts",
     "exports": {
         ".": {
-            "import": "./es/index.js"
+            "import": "./es/index.js",
+            "types": "./es/index.d.ts"
         },
         "./assets/css/styles": "./assets/css/styles.css",
         "./assets/css/styles.css": "./assets/css/styles.css"
@@ -47,28 +49,27 @@
     "scripts": {
         "clean": "rm -rf es && rm -rf lib && rm -rf assets",
         "prepublishOnly": "npm run build",
-        "build": "../../scripts/prepare-package.sh"
+        "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^19.2.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^19.2.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.824",
-        "@micromag/element-video": "^0.3.824",
+        "@micromag/core": "^0.4.4",
+        "@micromag/element-video": "^0.4.4",
         "classnames": "^2.2.6",
-        "lodash": "^4.17.21",
-        "prop-types": "^15.7.2",
-        "react-intl": "^6.6.4",
+        "lodash": "^4.17.23",
+        "react-intl": "^8.1.3",
         "uuid": "^9.0.0"
     },
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "e266e480cdc5741c73160840affee2eac7e7c9de"
+    "gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d"
 }