@uxf/ui 1.0.0-beta.88 → 1.0.0-beta.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.88",
+  "version": "1.0.0-beta.89",
   "description": "",
   "publishConfig": {
     "access": "public"

package/raster-image/raster-image.d.ts

@@ -1,5 +1,6 @@
-import { ImageSource } from "@uxf/core/utils/resizer";
+import { ImageSource, ResizerImageProps } from "@uxf/core/utils/resizer";
 import { FC, ImgHTMLAttributes, ReactNode } from "react";
+import { Quality } from "../utils/image";
 declare type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
 declare type Props = {
     alt: string;
@@ -10,6 +11,8 @@ declare type Props = {
     loading?: ImgProps["loading"];
     mode?: "contain" | "cover" | "responsive";
     noImageContent?: ReactNode;
+    options?: Omit<ResizerImageProps, "quality" | "toFormat">;
+    quality?: Quality;
     role?: ImgProps["role"];
     src: ImageSource | null | undefined;
     widths?: number[];

package/raster-image/raster-image.js

@@ -10,7 +10,7 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("../context");
 const image_1 = require("../utils/image");
 const RasterImage = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const componentContext = (0, context_1.useComponentContext)("rasterImage");
     const className = [
         props.mode === "contain" && "uxf-raster-image--contain",
@@ -18,17 +18,18 @@ const RasterImage = (props) => {
         props.className,
     ];
     const breakpoints = ["0em", ...Object.values((_a = props.breakpoints) !== null && _a !== void 0 ? _a : componentContext.breakpoints)];
-    const resizerSrc = (0, resizer_1.resizerImageUrl)(props.src, (_b = props.width) !== null && _b !== void 0 ? _b : "auto", (_c = props.height) !== null && _c !== void 0 ? _c : "auto");
+    const resizerSrc = (0, resizer_1.resizerImageUrl)(props.src, (_b = props.width) !== null && _b !== void 0 ? _b : "auto", (_c = props.height) !== null && _c !== void 0 ? _c : "auto", {
+        ...((_d = props.options) !== null && _d !== void 0 ? _d : {}),
+        quality: (0, image_1.getImgQuality)(props.quality, "original"),
+    });
     if (!resizerSrc) {
         return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-raster-image uxf-raster-image--no-image", ...className) }, props.noImageContent));
     }
-    return (react_1.default.createElement("picture", { className: (0, cx_1.cx)("uxf-raster-image", ...className) }, (_e = (_d = props.widths) === null || _d === void 0 ? void 0 : _d.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
+    return (react_1.default.createElement("picture", { className: (0, cx_1.cx)("uxf-raster-image", ...className) }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
             ? props.heights[i]
             : props.width && props.height
                 ? Math.ceil((props.height / props.width) * w)
-                : "auto", key: w, src: props.src, width: w }))).reverse()) !== null && _e !== void 0 ? _e : (
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    react_1.default.createElement(image_1.ImgSources, { height: (_f = props.height) !== null && _f !== void 0 ? _f : "auto", src: props.src, width: (_g = props.width) !== null && _g !== void 0 ? _g : "auto" })),
+                : "auto", key: w, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
         react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)("uxf-raster-image__img", props.mode === "contain" && "uxf-raster-image__img--contain", props.mode === "cover" && "uxf-raster-image__img--cover", props.imgClassName), height: props.height, loading: props.loading, src: resizerSrc, width: props.width })));
 };
 exports.RasterImage = RasterImage;

package/raster-image/raster-image.stories.d.ts

@@ -10,6 +10,8 @@ declare const _default: {
         loading?: "eager" | "lazy" | undefined;
         mode?: "contain" | "cover" | "responsive" | undefined;
         noImageContent?: React.ReactNode;
+        options?: Omit<import("@uxf/core/utils/resizer").ResizerImageProps, "quality" | "toFormat"> | undefined;
+        quality?: import("../utils/image").Quality | undefined;
         role?: React.AriaRole | undefined;
         src: import("@uxf/core/utils/resizer").ImageSource | null | undefined;
         widths?: number[] | undefined;

package/utils/image.d.ts

@@ -1,12 +1,17 @@
 import { ImageSource, ResizerImageProps } from "@uxf/core/utils/resizer";
 import { FC } from "react";
 export declare type Dimension = number | "auto";
+export declare type Format = "avif" | "webp" | "original";
+export declare type Quality = number | Record<Format, number>;
+export declare function getImgQuality(quality: Quality | undefined, format: Format): number | undefined;
 export declare function getImgUniqueIdentifier(src: ImageSource): string | undefined;
 export declare function getImgSrcSet(src?: ImageSource, width?: Dimension, height?: Dimension, options?: ResizerImageProps): string | undefined;
 interface ImageSourcesProps {
     breakpointIndex?: number;
     breakpoints?: string[];
     height: Dimension;
+    options?: Omit<ResizerImageProps, "quality" | "toFormat">;
+    quality?: Quality;
     src: ImageSource;
     width: Dimension;
 }

package/utils/image.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImgSources = exports.getImgSrcSet = exports.getImgUniqueIdentifier = void 0;
+exports.ImgSources = exports.getImgSrcSet = exports.getImgUniqueIdentifier = exports.getImgQuality = void 0;
 const resizer_1 = require("@uxf/core/utils/resizer");
 const react_1 = __importDefault(require("react"));
 function toFileResponse(src) {
@@ -16,6 +16,10 @@ function getImgExtension(src) {
     const ext = src.slice(src.lastIndexOf(".") + 1);
     return ext.length > 1 ? ext : undefined;
 }
+function getImgQuality(quality, format) {
+    return typeof quality === "number" ? quality : quality ? quality[format] : undefined;
+}
+exports.getImgQuality = getImgQuality;
 function getImgUniqueIdentifier(src) {
     var _a;
     const fileResponse = toFileResponse(src);
@@ -28,7 +32,7 @@ function getImgSrcSet(src, width, height, options = {}) {
     if (!src) {
         return undefined;
     }
-    let f;
+    let toFormat;
     let h = height !== null && height !== void 0 ? height : "auto";
     let w = width !== null && width !== void 0 ? width : "auto";
     if (typeof src === "string") {
@@ -36,14 +40,14 @@ function getImgSrcSet(src, width, height, options = {}) {
         if (extension === "svg") {
             return undefined;
         }
-        f = extension;
+        toFormat = extension;
     }
     const fileResponse = toFileResponse(src);
     if (fileResponse) {
         if (!fileResponse.uuid || fileResponse.extension === "svg") {
             return undefined;
         }
-        f = fileResponse.extension;
+        toFormat = fileResponse.extension;
     }
     const staticImageData = toStaticImageData(src);
     if (staticImageData) {
@@ -51,11 +55,10 @@ function getImgSrcSet(src, width, height, options = {}) {
         if (!staticImageData.src || extension === "svg") {
             return undefined;
         }
-        f = extension;
+        toFormat = extension;
         h = h || staticImageData.height;
         w = w || staticImageData.width;
     }
-    const toFormat = f !== null && f !== void 0 ? f : "png";
     if (typeof h === "number" || typeof w === "number") {
         return HIDPI_SIZES.map((size) => (0, resizer_1.resizerImageUrl)(src, w * size, h * size, {
             toFormat,
@@ -65,8 +68,8 @@ function getImgSrcSet(src, width, height, options = {}) {
     return (0, resizer_1.resizerImageUrl)(src, w, h, { toFormat, ...options });
 }
 exports.getImgSrcSet = getImgSrcSet;
-const EXTENSIONS = ["avif", "webp", undefined];
 const ImgSources = (props) => {
+    var _a, _b, _c;
     if (!props.src || (typeof props.src === "string" && getImgExtension(props.src) === "svg")) {
         return null;
     }
@@ -83,7 +86,19 @@ const ImgSources = (props) => {
         media = `(min-width: ${props.breakpoints[props.breakpointIndex]})`;
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        EXTENSIONS.map((type) => (react_1.default.createElement("source", { key: type, media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, { toFormat: type }), type: `image/${type}` }))),
-        react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {}) })));
+        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 : {}),
+                quality: getImgQuality(props.quality, "original"),
+            }) })));
 };
 exports.ImgSources = ImgSources;