@uxf/core 10.10.1 → 11.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/core",
-  "version": "10.10.1",
+  "version": "11.9.0",
   "description": "UXF Core",
   "author": "Petr Vejvoda <vejvoda@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/core#readme",

package/utils/image.d.ts

@@ -8,12 +8,19 @@ export declare function getImgQuality(quality: Quality | undefined, format: Form
 export declare function getImgUniqueIdentifier(src: ImageSource): string | undefined;
 export declare function getImgElementHeight(src: ImageSource, width: number | undefined, height: number | undefined): number | undefined;
 export declare function getImgElementWidth(src: ImageSource, width: number | undefined, height: number | undefined): number | undefined;
-export declare function getImgSrcSet(src?: ImageSource, width?: Dimension, height?: Dimension, options?: ResizerImageProps): string | undefined;
+export type GetImgSrcSetOptions = ResizerImageProps & {
+    maxHiDpi?: 3 | 2 | 1;
+};
+export declare function getImgSrcSet(src?: ImageSource, width?: Dimension, height?: Dimension, options?: GetImgSrcSetOptions): string | undefined;
+export type ImageSourcesOptions = Omit<GetImgSrcSetOptions, "quality" | "toFormat"> & {
+    isAvifDisabled?: boolean;
+    isWebPDisabled?: boolean;
+};
 interface ImageSourcesProps {
     breakpointIndex?: number;
     breakpoints?: string[];
     height: Dimension;
-    options?: Omit<ResizerImageProps, "quality" | "toFormat">;
+    options?: ImageSourcesOptions;
     quality?: Quality;
     src: ImageSource;
     width: Dimension;

package/utils/image.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImgSources = exports.getImgSrcSet = exports.getImgElementWidth = exports.getImgElementHeight = exports.getImgUniqueIdentifier = exports.getImgQuality = exports.getSvgImgUrl = void 0;
 const react_1 = __importDefault(require("react"));
+const hide_1 = require("../components/hide");
 const file_1 = require("./file");
 const resizer_1 = require("./resizer");
 function toImageResponse(src) {
@@ -85,17 +86,20 @@ function getImgSrcSet(src, width, height, options = {}) {
         h = h || staticImageData.height;
         w = w || staticImageData.width;
     }
+    const { maxHiDpi, ...restOptions } = options;
     if (typeof h === "number" || typeof w === "number") {
-        return HIDPI_SIZES.map((size) => (0, resizer_1.resizerImageUrl)(src, typeof w === "number" ? w * size : "auto", typeof h === "number" ? h * size : "auto", {
+        return (maxHiDpi ? HIDPI_SIZES.slice(-maxHiDpi) : HIDPI_SIZES)
+            .map((size) => (0, resizer_1.resizerImageUrl)(src, typeof w === "number" ? w * size : "auto", typeof h === "number" ? h * size : "auto", {
             toFormat,
-            ...options,
-        }) + (size > 1 ? ` ${size}x` : "")).join(", ");
+            ...restOptions,
+        }) + (size > 1 ? ` ${size}x` : ""))
+            .join(", ");
     }
-    return (0, resizer_1.resizerImageUrl)(src, w, h, { toFormat, ...options });
+    return (0, resizer_1.resizerImageUrl)(src, w, h, { toFormat, ...restOptions });
 }
 exports.getImgSrcSet = getImgSrcSet;
 const ImgSources = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!props.src) {
         return null;
     }
@@ -112,18 +116,20 @@ const ImgSources = (props) => {
         media = `(min-width: ${props.breakpoints[props.breakpointIndex]})`;
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(hide_1.Hide, { when: Boolean((_a = props.options) === null || _a === void 0 ? void 0 : _a.isAvifDisabled) },
+            react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
+                    ...((_b = props.options) !== null && _b !== void 0 ? _b : {}),
+                    quality: getImgQuality(props.quality, "avif"),
+                    toFormat: "avif",
+                }), type: "image/avif" })),
+        react_1.default.createElement(hide_1.Hide, { when: Boolean((_c = props.options) === null || _c === void 0 ? void 0 : _c.isWebPDisabled) },
+            react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
+                    ...((_d = props.options) !== null && _d !== void 0 ? _d : {}),
+                    quality: getImgQuality(props.quality, "webp"),
+                    toFormat: "webp",
+                }), type: "image/webp" })),
         react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
-                ...((_a = props.options) !== null && _a !== void 0 ? _a : {}),
-                quality: getImgQuality(props.quality, "avif"),
-                toFormat: "avif",
-            }), type: "image/avif" }),
-        react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
-                ...((_b = props.options) !== null && _b !== void 0 ? _b : {}),
-                quality: getImgQuality(props.quality, "webp"),
-                toFormat: "webp",
-            }), type: "image/webp" }),
-        react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
-                ...((_c = props.options) !== null && _c !== void 0 ? _c : {}),
+                ...((_e = props.options) !== null && _e !== void 0 ? _e : {}),
                 quality: getImgQuality(props.quality, "original"),
             }) })));
 };