@prismicio/react 2.6.2 → 2.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PrismicImage.cjs +10 -5
- package/dist/PrismicImage.cjs.map +1 -1
- package/dist/PrismicImage.d.ts +456 -3
- package/dist/PrismicImage.js +10 -5
- package/dist/PrismicImage.js.map +1 -1
- package/dist/PrismicRichText.d.ts +1 -1
- package/dist/SliceZone.cjs +26 -36
- package/dist/SliceZone.cjs.map +1 -1
- package/dist/SliceZone.d.ts +36 -33
- package/dist/SliceZone.js +26 -19
- package/dist/SliceZone.js.map +1 -1
- package/dist/clientHooks.cjs.map +1 -1
- package/dist/clientHooks.d.ts +44 -44
- package/dist/clientHooks.js.map +1 -1
- package/dist/package.json.cjs +1 -1
- package/dist/package.json.js +1 -1
- package/package.json +13 -13
- package/src/PrismicImage.tsx +19 -13
- package/src/SliceZone.tsx +111 -96
- package/src/clientHooks.ts +26 -26
package/dist/PrismicImage.cjs
CHANGED
|
@@ -23,10 +23,9 @@ function _interopNamespaceDefault(e) {
|
|
|
23
23
|
return Object.freeze(n);
|
|
24
24
|
}
|
|
25
25
|
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
26
|
-
const PrismicImage = React__namespace.forwardRef(function PrismicImage2(
|
|
27
|
-
const { field, alt, fallbackAlt, imgixParams, widths, pixelDensities, ...restProps } = props;
|
|
26
|
+
const PrismicImage = React__namespace.forwardRef(function PrismicImage2({ field, alt, fallbackAlt, imgixParams = {}, widths, pixelDensities, ...restProps }, ref) {
|
|
28
27
|
if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
|
|
29
|
-
if (typeof alt === "string" &&
|
|
28
|
+
if (typeof alt === "string" && alt !== "") {
|
|
30
29
|
console.warn(`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg.devMsg("alt-must-be-an-empty-string")}`);
|
|
31
30
|
}
|
|
32
31
|
if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
|
|
@@ -37,18 +36,24 @@ const PrismicImage = React__namespace.forwardRef(function PrismicImage2(props, r
|
|
|
37
36
|
}
|
|
38
37
|
}
|
|
39
38
|
if (isFilled.imageThumbnail(field)) {
|
|
39
|
+
const resolvedImgixParams = imgixParams;
|
|
40
|
+
for (const x in imgixParams) {
|
|
41
|
+
if (resolvedImgixParams[x] === null) {
|
|
42
|
+
resolvedImgixParams[x] = void 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
40
45
|
let src;
|
|
41
46
|
let srcSet;
|
|
42
47
|
if (widths || !pixelDensities) {
|
|
43
48
|
const res = asImageWidthSrcSet.asImageWidthSrcSet(field, {
|
|
44
|
-
...
|
|
49
|
+
...resolvedImgixParams,
|
|
45
50
|
widths: widths === "defaults" ? void 0 : widths
|
|
46
51
|
});
|
|
47
52
|
src = res.src;
|
|
48
53
|
srcSet = res.srcset;
|
|
49
54
|
} else if (pixelDensities) {
|
|
50
55
|
const res = asImagePixelDensitySrcSet.asImagePixelDensitySrcSet(field, {
|
|
51
|
-
...
|
|
56
|
+
...resolvedImgixParams,
|
|
52
57
|
pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
|
|
53
58
|
});
|
|
54
59
|
src = res.src;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicImage.cjs","sources":["../../src/PrismicImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\n\nimport { devMsg } from \"./lib/devMsg\";\n\n/**\n * Props for `<PrismicImage>`.\n */\nexport type PrismicImageProps = Omit<\n\tReact.DetailedHTMLProps<\n\t\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\tHTMLImageElement\n\t>,\n\t\"src\" | \"srcset\" | \"alt\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismic.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?:
|
|
1
|
+
{"version":3,"file":"PrismicImage.cjs","sources":["../../src/PrismicImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\nimport { ImgixURLParams } from \"imgix-url-builder\";\n\nimport { devMsg } from \"./lib/devMsg\";\n\n/**\n * Props for `<PrismicImage>`.\n */\nexport type PrismicImageProps = Omit<\n\tReact.DetailedHTMLProps<\n\t\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\tHTMLImageElement\n\t>,\n\t\"src\" | \"srcset\" | \"alt\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismic.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Widths used to build a `srcset` value for the Image field.\n\t\t\t\t *\n\t\t\t\t * If a `widths` prop is not given or `\"defaults\"` is passed, the\n\t\t\t\t * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,\n\t\t\t\t * 3840.\n\t\t\t\t *\n\t\t\t\t * If the Image field contains responsive views, each responsive view\n\t\t\t\t * can be used as a width in the resulting `srcset` by passing\n\t\t\t\t * `\"thumbnails\"` as the `widths` prop.\n\t\t\t\t */\n\t\t\t\twidths?:\n\t\t\t\t\t| NonNullable<\n\t\t\t\t\t\t\tParameters<typeof prismic.asImageWidthSrcSet>[1]\n\t\t\t\t\t >[\"widths\"]\n\t\t\t\t\t| \"defaults\";\n\t\t\t\t/**\n\t\t\t\t * Not used when the `widths` prop is used.\n\t\t\t\t */\n\t\t\t\tpixelDensities?: never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Not used when the `widths` prop is used.\n\t\t\t\t */\n\t\t\t\twidths?: never;\n\t\t\t\t/**\n\t\t\t\t * Pixel densities used to build a `srcset` value for the Image field.\n\t\t\t\t *\n\t\t\t\t * If a `pixelDensities` prop is passed `\"defaults\"`, the following\n\t\t\t\t * pixel densities will be used: 1, 2, 3.\n\t\t\t\t */\n\t\t\t\tpixelDensities:\n\t\t\t\t\t| NonNullable<\n\t\t\t\t\t\t\tParameters<typeof prismic.asImagePixelDensitySrcSet>[1]\n\t\t\t\t\t >[\"pixelDensities\"]\n\t\t\t\t\t| \"defaults\";\n\t\t }\n\t);\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails. It will automatically set the `alt` attribute using the Image\n * field's `alt` property.\n *\n * By default, a widths-based srcset will be used to support responsive images.\n * This ensures only the smallest image needed for a browser is downloaded.\n *\n * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default\n * pixel densities can be used by using `pixelDensities=\"defaults\"`.\n *\n * **Note**: If you are using a framework that has a native image component,\n * such as Next.js and Gatsby, prefer using those image components instead. They\n * can provide deeper framework integration than `<PrismicImage>`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component for the given Image field.\n */\nexport const PrismicImage = React.forwardRef(function PrismicImage(\n\t{\n\t\tfield,\n\t\talt,\n\t\tfallbackAlt,\n\t\timgixParams = {},\n\t\twidths,\n\t\tpixelDensities,\n\t\t...restProps\n\t}: PrismicImageProps,\n\tref: React.ForwardedRef<HTMLImageElement>,\n): JSX.Element | null {\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (widths && pixelDensities) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] Only one of \"widths\" or \"pixelDensities\" props can be provided. You can resolve this warning by removing either the \"widths\" or \"pixelDensities\" prop. \"widths\" will be used in this case.`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (prismic.isFilled.imageThumbnail(field)) {\n\t\tconst resolvedImgixParams = imgixParams;\n\t\tfor (const x in imgixParams) {\n\t\t\tif (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {\n\t\t\t\tresolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;\n\t\t\t}\n\t\t}\n\n\t\tlet src: string | undefined;\n\t\tlet srcSet: string | undefined;\n\n\t\tif (widths || !pixelDensities) {\n\t\t\tconst res = prismic.asImageWidthSrcSet(field, {\n\t\t\t\t...resolvedImgixParams,\n\t\t\t\twidths: widths === \"defaults\" ? undefined : widths,\n\t\t\t} as ImgixURLParams);\n\n\t\t\tsrc = res.src;\n\t\t\tsrcSet = res.srcset;\n\t\t} else if (pixelDensities) {\n\t\t\tconst res = prismic.asImagePixelDensitySrcSet(field, {\n\t\t\t\t...resolvedImgixParams,\n\t\t\t\tpixelDensities:\n\t\t\t\t\tpixelDensities === \"defaults\" ? undefined : pixelDensities,\n\t\t\t} as ImgixURLParams);\n\n\t\t\tsrc = res.src;\n\t\t\tsrcSet = res.srcset;\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\tref={ref}\n\t\t\t\tsrc={src}\n\t\t\t\tsrcSet={srcSet}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n});\n"],"names":["React","PrismicImage","devMsg","prismic.isFilled.imageThumbnail","prismic.asImageWidthSrcSet","prismic.asImagePixelDensitySrcSet","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyGO,MAAM,eAAeA,iBAAM,WAAW,SAASC,cACrD,EACC,OACA,KACA,aACA,cAAc,CACd,GAAA,QACA,gBACA,GAAG,aAEJ,KAAyC;AAEzC,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,qQAAqQC,OACpQ,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,qSAAqSA,OACpS,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,UAAU,gBAAgB;AAC7B,cAAQ,KACP,2MAA2M;AAAA,IAE5M;AAAA,EACD;AAED,MAAIC,SAAAA,eAAgC,KAAK,GAAG;AAC3C,UAAM,sBAAsB;AAC5B,eAAW,KAAK,aAAa;AACxB,UAAA,oBAAoB,CAAqC,MAAM,MAAM;AACxE,4BAAoB,CAAqC,IAAI;AAAA,MAC7D;AAAA,IACD;AAEG,QAAA;AACA,QAAA;AAEA,QAAA,UAAU,CAAC,gBAAgB;AACxB,YAAA,MAAMC,mBAAQ,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QACH,QAAQ,WAAW,aAAa,SAAY;AAAA,MAAA,CAC1B;AAEnB,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,eACH,gBAAgB;AACpB,YAAA,MAAMC,0BAAQ,0BAA0B,OAAO;AAAA,QACpD,GAAG;AAAA,QACH,gBACC,mBAAmB,aAAa,SAAY;AAAA,MAAA,CAC3B;AAEnB,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,IACb;AAGA,WAAAC,2BAAA,IAAC,OACA,EAAA,KACA,KACA,QACA,KAAK,QAAQ,MAAM,OAAO,cAC1B,GAAI,UAAU,CAAA;AAAA,EAAA,OAGV;AACC,WAAA;AAAA,EACP;AACF,CAAC;;"}
|
package/dist/PrismicImage.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import * as prismic from "@prismicio/client";
|
|
3
|
+
import { ImgixURLParams } from "imgix-url-builder";
|
|
3
4
|
/**
|
|
4
5
|
* Props for `<PrismicImage>`.
|
|
5
6
|
*/
|
|
@@ -13,7 +14,9 @@ export type PrismicImageProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttrib
|
|
|
13
14
|
*
|
|
14
15
|
* See: https://docs.imgix.com/apis/rendering
|
|
15
16
|
*/
|
|
16
|
-
imgixParams?:
|
|
17
|
+
imgixParams?: {
|
|
18
|
+
[P in keyof ImgixURLParams]: ImgixURLParams[P] | null;
|
|
19
|
+
};
|
|
17
20
|
/**
|
|
18
21
|
* Declare an image as decorative by providing `alt=""`.
|
|
19
22
|
*
|
|
@@ -88,7 +91,232 @@ export declare const PrismicImage: React.ForwardRefExoticComponent<(Omit<Omit<Re
|
|
|
88
91
|
*
|
|
89
92
|
* See: https://docs.imgix.com/apis/rendering
|
|
90
93
|
*/
|
|
91
|
-
imgixParams?:
|
|
94
|
+
imgixParams?: {
|
|
95
|
+
ar?: `${number}:${number}` | null | undefined;
|
|
96
|
+
auto?: ("true" | "enhance" | "format" | "redeye" | "compress")[] | null | undefined;
|
|
97
|
+
bg?: string | null | undefined;
|
|
98
|
+
blendAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
99
|
+
blendalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
100
|
+
ba?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
101
|
+
blendAlpha?: number | null | undefined;
|
|
102
|
+
blendalpha?: number | null | undefined;
|
|
103
|
+
balph?: number | null | undefined;
|
|
104
|
+
blendColor?: string | null | undefined;
|
|
105
|
+
blendcolor?: string | null | undefined;
|
|
106
|
+
blendClr?: string | null | undefined;
|
|
107
|
+
blendclr?: string | null | undefined;
|
|
108
|
+
blendCrop?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
109
|
+
blendcrop?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
110
|
+
bc?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
111
|
+
blendFit?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
112
|
+
blendfit?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
113
|
+
bf?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
114
|
+
blendH?: number | null | undefined;
|
|
115
|
+
blendh?: number | null | undefined;
|
|
116
|
+
bh?: number | null | undefined;
|
|
117
|
+
blendMode?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
118
|
+
blendmode?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
119
|
+
bm?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
120
|
+
blendPad?: number | null | undefined;
|
|
121
|
+
blendpad?: number | null | undefined;
|
|
122
|
+
bp?: number | null | undefined;
|
|
123
|
+
blendSize?: "inherit" | null | undefined;
|
|
124
|
+
blendsize?: "inherit" | null | undefined;
|
|
125
|
+
bs?: "inherit" | null | undefined;
|
|
126
|
+
blendW?: number | null | undefined;
|
|
127
|
+
blendw?: number | null | undefined;
|
|
128
|
+
bw?: number | null | undefined;
|
|
129
|
+
blendX?: number | null | undefined;
|
|
130
|
+
blendx?: number | null | undefined;
|
|
131
|
+
bx?: number | null | undefined;
|
|
132
|
+
blendY?: number | null | undefined;
|
|
133
|
+
blendy?: number | null | undefined;
|
|
134
|
+
by?: number | null | undefined;
|
|
135
|
+
blend?: string | null | undefined;
|
|
136
|
+
b?: string | null | undefined;
|
|
137
|
+
blur?: number | null | undefined;
|
|
138
|
+
borderBottom?: number | null | undefined;
|
|
139
|
+
borderLeft?: number | null | undefined;
|
|
140
|
+
borderRadiusInner?: number | [number, number, number, number] | null | undefined;
|
|
141
|
+
borderRadius?: number | [number, number, number, number] | null | undefined;
|
|
142
|
+
borderRight?: number | null | undefined;
|
|
143
|
+
borderTop?: number | null | undefined;
|
|
144
|
+
border?: [number, string] | null | undefined;
|
|
145
|
+
bri?: number | null | undefined;
|
|
146
|
+
ch?: ("width" | "dpr" | "save-data")[] | null | undefined;
|
|
147
|
+
chromasub?: 444 | 422 | 420 | null | undefined;
|
|
148
|
+
colorquant?: number | null | undefined;
|
|
149
|
+
colors?: number | null | undefined;
|
|
150
|
+
con?: number | null | undefined;
|
|
151
|
+
cornerRadius?: number | [number, number, number, number] | null | undefined;
|
|
152
|
+
crop?: ("faces" | "top" | "bottom" | "left" | "right" | "entropy" | "edges" | "focalpoint")[] | null | undefined;
|
|
153
|
+
cs?: "srgb" | "adobergb1998" | "tinysrgb" | "strip" | null | undefined;
|
|
154
|
+
dl?: string | null | undefined;
|
|
155
|
+
dpi?: number | null | undefined;
|
|
156
|
+
dpr?: number | null | undefined;
|
|
157
|
+
duotoneAlpha?: number | null | undefined;
|
|
158
|
+
duotone?: [string, string] | null | undefined;
|
|
159
|
+
exp?: number | null | undefined;
|
|
160
|
+
expires?: number | null | undefined;
|
|
161
|
+
faceindex?: number | null | undefined;
|
|
162
|
+
facepad?: number | null | undefined;
|
|
163
|
+
faces?: 1 | null | undefined;
|
|
164
|
+
fillColor?: string | null | undefined;
|
|
165
|
+
fillcolor?: string | null | undefined;
|
|
166
|
+
fill?: "blur" | "solid" | null | undefined;
|
|
167
|
+
fit?: "crop" | "fill" | "clamp" | "clip" | "scale" | "max" | "facearea" | "fillmax" | "min" | null | undefined;
|
|
168
|
+
f?: "crop" | "fill" | "clamp" | "clip" | "scale" | "max" | "facearea" | "fillmax" | "min" | null | undefined;
|
|
169
|
+
flip?: "h" | "v" | "hv" | null | undefined;
|
|
170
|
+
fm?: "gif" | "jpg" | "jp2" | "json" | "jxr" | "pjpg" | "mp4" | "png" | "png8" | "png32" | "webp" | "webm" | "blurhash" | "avif" | null | undefined;
|
|
171
|
+
fpDebug?: boolean | null | undefined;
|
|
172
|
+
fpX?: number | null | undefined;
|
|
173
|
+
fpY?: number | null | undefined;
|
|
174
|
+
fpZ?: number | null | undefined;
|
|
175
|
+
gam?: number | null | undefined;
|
|
176
|
+
gridColors?: [string, string] | null | undefined;
|
|
177
|
+
gridSize?: number | null | undefined;
|
|
178
|
+
h?: number | null | undefined;
|
|
179
|
+
height?: number | null | undefined;
|
|
180
|
+
high?: number | null | undefined;
|
|
181
|
+
htn?: number | null | undefined;
|
|
182
|
+
hue?: number | null | undefined;
|
|
183
|
+
invert?: boolean | null | undefined;
|
|
184
|
+
inv?: boolean | null | undefined;
|
|
185
|
+
iptc?: "allow" | "block" | null | undefined;
|
|
186
|
+
lossless?: boolean | null | undefined;
|
|
187
|
+
markAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
188
|
+
ma?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
189
|
+
markalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
190
|
+
markAlpha?: number | null | undefined;
|
|
191
|
+
markalpha?: number | null | undefined;
|
|
192
|
+
malph?: number | null | undefined;
|
|
193
|
+
markBase?: string | null | undefined;
|
|
194
|
+
mb?: string | null | undefined;
|
|
195
|
+
markbase?: string | null | undefined;
|
|
196
|
+
markFit?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
197
|
+
mf?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
198
|
+
markfit?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
199
|
+
markH?: number | null | undefined;
|
|
200
|
+
mh?: number | null | undefined;
|
|
201
|
+
markh?: number | null | undefined;
|
|
202
|
+
markPad?: number | null | undefined;
|
|
203
|
+
mp?: number | null | undefined;
|
|
204
|
+
markpad?: number | null | undefined;
|
|
205
|
+
markRot?: number | null | undefined;
|
|
206
|
+
markScale?: number | null | undefined;
|
|
207
|
+
ms?: number | null | undefined;
|
|
208
|
+
markscale?: number | null | undefined;
|
|
209
|
+
markTile?: "grid" | null | undefined;
|
|
210
|
+
mtile?: "grid" | null | undefined;
|
|
211
|
+
marktile?: "grid" | null | undefined;
|
|
212
|
+
markW?: number | null | undefined;
|
|
213
|
+
mw?: number | null | undefined;
|
|
214
|
+
markw?: number | null | undefined;
|
|
215
|
+
markX?: number | null | undefined;
|
|
216
|
+
mx?: number | null | undefined;
|
|
217
|
+
markx?: number | null | undefined;
|
|
218
|
+
markY?: number | null | undefined;
|
|
219
|
+
my?: number | null | undefined;
|
|
220
|
+
marky?: number | null | undefined;
|
|
221
|
+
mark?: string | null | undefined;
|
|
222
|
+
m?: string | null | undefined;
|
|
223
|
+
maskBg?: string | null | undefined;
|
|
224
|
+
maskbg?: string | null | undefined;
|
|
225
|
+
mask?: string | null | undefined;
|
|
226
|
+
maxH?: number | null | undefined;
|
|
227
|
+
maxHeight?: number | null | undefined;
|
|
228
|
+
maxW?: number | null | undefined;
|
|
229
|
+
maxWidth?: number | null | undefined;
|
|
230
|
+
minH?: number | null | undefined;
|
|
231
|
+
minHeight?: number | null | undefined;
|
|
232
|
+
minW?: number | null | undefined;
|
|
233
|
+
minWidth?: number | null | undefined;
|
|
234
|
+
monochrome?: string | null | undefined;
|
|
235
|
+
mono?: string | null | undefined;
|
|
236
|
+
nr?: number | null | undefined;
|
|
237
|
+
nrs?: number | null | undefined;
|
|
238
|
+
orient?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 90 | 180 | 270 | null | undefined;
|
|
239
|
+
or?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 90 | 180 | 270 | null | undefined;
|
|
240
|
+
padBottom?: number | null | undefined;
|
|
241
|
+
padLeft?: number | null | undefined;
|
|
242
|
+
padRight?: number | null | undefined;
|
|
243
|
+
padTop?: number | null | undefined;
|
|
244
|
+
pad?: number | null | undefined;
|
|
245
|
+
page?: number | null | undefined;
|
|
246
|
+
palette?: "json" | "css" | null | undefined;
|
|
247
|
+
pdfAnnotation?: boolean | null | undefined;
|
|
248
|
+
annotation?: boolean | null | undefined;
|
|
249
|
+
prefix?: string | null | undefined;
|
|
250
|
+
px?: number | null | undefined;
|
|
251
|
+
q?: number | null | undefined;
|
|
252
|
+
rect?: [number | "left" | "right" | "center", number | "top" | "bottom" | "middle", number, number] | null | undefined;
|
|
253
|
+
rot?: number | null | undefined;
|
|
254
|
+
sat?: number | null | undefined;
|
|
255
|
+
sepia?: number | null | undefined;
|
|
256
|
+
shad?: number | null | undefined;
|
|
257
|
+
sharp?: number | null | undefined;
|
|
258
|
+
transparency?: "grid" | null | undefined;
|
|
259
|
+
trimColor?: string | null | undefined;
|
|
260
|
+
trimcolor?: string | null | undefined;
|
|
261
|
+
trimMd?: number | null | undefined;
|
|
262
|
+
trimmd?: number | null | undefined;
|
|
263
|
+
trimPad?: number | null | undefined;
|
|
264
|
+
trimpad?: number | null | undefined;
|
|
265
|
+
trimSd?: number | null | undefined;
|
|
266
|
+
trimsd?: number | null | undefined;
|
|
267
|
+
trimTol?: number | null | undefined;
|
|
268
|
+
trimtol?: number | null | undefined;
|
|
269
|
+
trim?: "color" | "auto" | null | undefined;
|
|
270
|
+
txtAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
271
|
+
txtalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
272
|
+
ta?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
273
|
+
txtClip?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
274
|
+
txtclip?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
275
|
+
tcl?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
276
|
+
txtColor?: string | null | undefined;
|
|
277
|
+
txtcolor?: string | null | undefined;
|
|
278
|
+
txtClr?: string | null | undefined;
|
|
279
|
+
txtclr?: string | null | undefined;
|
|
280
|
+
tc?: string | null | undefined;
|
|
281
|
+
txtFit?: "max" | null | undefined;
|
|
282
|
+
txtfit?: "max" | null | undefined;
|
|
283
|
+
txtFont?: import("imgix-url-builder").Font | null | undefined;
|
|
284
|
+
tf?: import("imgix-url-builder").Font | null | undefined;
|
|
285
|
+
txtfont?: import("imgix-url-builder").Font | null | undefined;
|
|
286
|
+
txtLead?: number | null | undefined;
|
|
287
|
+
txtlead?: number | null | undefined;
|
|
288
|
+
txtLig?: 0 | 1 | 2 | null | undefined;
|
|
289
|
+
txtlig?: 0 | 1 | 2 | null | undefined;
|
|
290
|
+
txtLineColor?: string | null | undefined;
|
|
291
|
+
txtlinecolor?: string | null | undefined;
|
|
292
|
+
txtLineClr?: string | null | undefined;
|
|
293
|
+
txtlineclr?: string | null | undefined;
|
|
294
|
+
txtLine?: number | null | undefined;
|
|
295
|
+
txtline?: number | null | undefined;
|
|
296
|
+
tl?: number | null | undefined;
|
|
297
|
+
txtPad?: number | null | undefined;
|
|
298
|
+
txtpad?: number | null | undefined;
|
|
299
|
+
tp?: number | null | undefined;
|
|
300
|
+
txtShad?: number | null | undefined;
|
|
301
|
+
txtshad?: number | null | undefined;
|
|
302
|
+
tsh?: number | null | undefined;
|
|
303
|
+
txtSize?: number | null | undefined;
|
|
304
|
+
tsz?: number | null | undefined;
|
|
305
|
+
txtsize?: number | null | undefined;
|
|
306
|
+
txtTrack?: number | null | undefined;
|
|
307
|
+
txttrack?: number | null | undefined;
|
|
308
|
+
tt?: number | null | undefined;
|
|
309
|
+
txtWidth?: number | null | undefined;
|
|
310
|
+
txtwidth?: number | null | undefined;
|
|
311
|
+
txt?: string | null | undefined;
|
|
312
|
+
t?: string | null | undefined;
|
|
313
|
+
usm?: number | null | undefined;
|
|
314
|
+
usmrad?: number | null | undefined;
|
|
315
|
+
vib?: number | null | undefined;
|
|
316
|
+
w?: number | null | undefined;
|
|
317
|
+
width?: number | null | undefined;
|
|
318
|
+
s?: string | null | undefined;
|
|
319
|
+
} | undefined;
|
|
92
320
|
/**
|
|
93
321
|
* Declare an image as decorative by providing `alt=""`.
|
|
94
322
|
*
|
|
@@ -131,7 +359,232 @@ export declare const PrismicImage: React.ForwardRefExoticComponent<(Omit<Omit<Re
|
|
|
131
359
|
*
|
|
132
360
|
* See: https://docs.imgix.com/apis/rendering
|
|
133
361
|
*/
|
|
134
|
-
imgixParams?:
|
|
362
|
+
imgixParams?: {
|
|
363
|
+
ar?: `${number}:${number}` | null | undefined;
|
|
364
|
+
auto?: ("true" | "enhance" | "format" | "redeye" | "compress")[] | null | undefined;
|
|
365
|
+
bg?: string | null | undefined;
|
|
366
|
+
blendAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
367
|
+
blendalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
368
|
+
ba?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
369
|
+
blendAlpha?: number | null | undefined;
|
|
370
|
+
blendalpha?: number | null | undefined;
|
|
371
|
+
balph?: number | null | undefined;
|
|
372
|
+
blendColor?: string | null | undefined;
|
|
373
|
+
blendcolor?: string | null | undefined;
|
|
374
|
+
blendClr?: string | null | undefined;
|
|
375
|
+
blendclr?: string | null | undefined;
|
|
376
|
+
blendCrop?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
377
|
+
blendcrop?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
378
|
+
bc?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
379
|
+
blendFit?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
380
|
+
blendfit?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
381
|
+
bf?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
382
|
+
blendH?: number | null | undefined;
|
|
383
|
+
blendh?: number | null | undefined;
|
|
384
|
+
bh?: number | null | undefined;
|
|
385
|
+
blendMode?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
386
|
+
blendmode?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
387
|
+
bm?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
388
|
+
blendPad?: number | null | undefined;
|
|
389
|
+
blendpad?: number | null | undefined;
|
|
390
|
+
bp?: number | null | undefined;
|
|
391
|
+
blendSize?: "inherit" | null | undefined;
|
|
392
|
+
blendsize?: "inherit" | null | undefined;
|
|
393
|
+
bs?: "inherit" | null | undefined;
|
|
394
|
+
blendW?: number | null | undefined;
|
|
395
|
+
blendw?: number | null | undefined;
|
|
396
|
+
bw?: number | null | undefined;
|
|
397
|
+
blendX?: number | null | undefined;
|
|
398
|
+
blendx?: number | null | undefined;
|
|
399
|
+
bx?: number | null | undefined;
|
|
400
|
+
blendY?: number | null | undefined;
|
|
401
|
+
blendy?: number | null | undefined;
|
|
402
|
+
by?: number | null | undefined;
|
|
403
|
+
blend?: string | null | undefined;
|
|
404
|
+
b?: string | null | undefined;
|
|
405
|
+
blur?: number | null | undefined;
|
|
406
|
+
borderBottom?: number | null | undefined;
|
|
407
|
+
borderLeft?: number | null | undefined;
|
|
408
|
+
borderRadiusInner?: number | [number, number, number, number] | null | undefined;
|
|
409
|
+
borderRadius?: number | [number, number, number, number] | null | undefined;
|
|
410
|
+
borderRight?: number | null | undefined;
|
|
411
|
+
borderTop?: number | null | undefined;
|
|
412
|
+
border?: [number, string] | null | undefined;
|
|
413
|
+
bri?: number | null | undefined;
|
|
414
|
+
ch?: ("width" | "dpr" | "save-data")[] | null | undefined;
|
|
415
|
+
chromasub?: 444 | 422 | 420 | null | undefined;
|
|
416
|
+
colorquant?: number | null | undefined;
|
|
417
|
+
colors?: number | null | undefined;
|
|
418
|
+
con?: number | null | undefined;
|
|
419
|
+
cornerRadius?: number | [number, number, number, number] | null | undefined;
|
|
420
|
+
crop?: ("faces" | "top" | "bottom" | "left" | "right" | "entropy" | "edges" | "focalpoint")[] | null | undefined;
|
|
421
|
+
cs?: "srgb" | "adobergb1998" | "tinysrgb" | "strip" | null | undefined;
|
|
422
|
+
dl?: string | null | undefined;
|
|
423
|
+
dpi?: number | null | undefined;
|
|
424
|
+
dpr?: number | null | undefined;
|
|
425
|
+
duotoneAlpha?: number | null | undefined;
|
|
426
|
+
duotone?: [string, string] | null | undefined;
|
|
427
|
+
exp?: number | null | undefined;
|
|
428
|
+
expires?: number | null | undefined;
|
|
429
|
+
faceindex?: number | null | undefined;
|
|
430
|
+
facepad?: number | null | undefined;
|
|
431
|
+
faces?: 1 | null | undefined;
|
|
432
|
+
fillColor?: string | null | undefined;
|
|
433
|
+
fillcolor?: string | null | undefined;
|
|
434
|
+
fill?: "blur" | "solid" | null | undefined;
|
|
435
|
+
fit?: "crop" | "fill" | "clamp" | "clip" | "scale" | "max" | "facearea" | "fillmax" | "min" | null | undefined;
|
|
436
|
+
f?: "crop" | "fill" | "clamp" | "clip" | "scale" | "max" | "facearea" | "fillmax" | "min" | null | undefined;
|
|
437
|
+
flip?: "h" | "v" | "hv" | null | undefined;
|
|
438
|
+
fm?: "gif" | "jpg" | "jp2" | "json" | "jxr" | "pjpg" | "mp4" | "png" | "png8" | "png32" | "webp" | "webm" | "blurhash" | "avif" | null | undefined;
|
|
439
|
+
fpDebug?: boolean | null | undefined;
|
|
440
|
+
fpX?: number | null | undefined;
|
|
441
|
+
fpY?: number | null | undefined;
|
|
442
|
+
fpZ?: number | null | undefined;
|
|
443
|
+
gam?: number | null | undefined;
|
|
444
|
+
gridColors?: [string, string] | null | undefined;
|
|
445
|
+
gridSize?: number | null | undefined;
|
|
446
|
+
h?: number | null | undefined;
|
|
447
|
+
height?: number | null | undefined;
|
|
448
|
+
high?: number | null | undefined;
|
|
449
|
+
htn?: number | null | undefined;
|
|
450
|
+
hue?: number | null | undefined;
|
|
451
|
+
invert?: boolean | null | undefined;
|
|
452
|
+
inv?: boolean | null | undefined;
|
|
453
|
+
iptc?: "allow" | "block" | null | undefined;
|
|
454
|
+
lossless?: boolean | null | undefined;
|
|
455
|
+
markAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
456
|
+
ma?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
457
|
+
markalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
458
|
+
markAlpha?: number | null | undefined;
|
|
459
|
+
markalpha?: number | null | undefined;
|
|
460
|
+
malph?: number | null | undefined;
|
|
461
|
+
markBase?: string | null | undefined;
|
|
462
|
+
mb?: string | null | undefined;
|
|
463
|
+
markbase?: string | null | undefined;
|
|
464
|
+
markFit?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
465
|
+
mf?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
466
|
+
markfit?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
467
|
+
markH?: number | null | undefined;
|
|
468
|
+
mh?: number | null | undefined;
|
|
469
|
+
markh?: number | null | undefined;
|
|
470
|
+
markPad?: number | null | undefined;
|
|
471
|
+
mp?: number | null | undefined;
|
|
472
|
+
markpad?: number | null | undefined;
|
|
473
|
+
markRot?: number | null | undefined;
|
|
474
|
+
markScale?: number | null | undefined;
|
|
475
|
+
ms?: number | null | undefined;
|
|
476
|
+
markscale?: number | null | undefined;
|
|
477
|
+
markTile?: "grid" | null | undefined;
|
|
478
|
+
mtile?: "grid" | null | undefined;
|
|
479
|
+
marktile?: "grid" | null | undefined;
|
|
480
|
+
markW?: number | null | undefined;
|
|
481
|
+
mw?: number | null | undefined;
|
|
482
|
+
markw?: number | null | undefined;
|
|
483
|
+
markX?: number | null | undefined;
|
|
484
|
+
mx?: number | null | undefined;
|
|
485
|
+
markx?: number | null | undefined;
|
|
486
|
+
markY?: number | null | undefined;
|
|
487
|
+
my?: number | null | undefined;
|
|
488
|
+
marky?: number | null | undefined;
|
|
489
|
+
mark?: string | null | undefined;
|
|
490
|
+
m?: string | null | undefined;
|
|
491
|
+
maskBg?: string | null | undefined;
|
|
492
|
+
maskbg?: string | null | undefined;
|
|
493
|
+
mask?: string | null | undefined;
|
|
494
|
+
maxH?: number | null | undefined;
|
|
495
|
+
maxHeight?: number | null | undefined;
|
|
496
|
+
maxW?: number | null | undefined;
|
|
497
|
+
maxWidth?: number | null | undefined;
|
|
498
|
+
minH?: number | null | undefined;
|
|
499
|
+
minHeight?: number | null | undefined;
|
|
500
|
+
minW?: number | null | undefined;
|
|
501
|
+
minWidth?: number | null | undefined;
|
|
502
|
+
monochrome?: string | null | undefined;
|
|
503
|
+
mono?: string | null | undefined;
|
|
504
|
+
nr?: number | null | undefined;
|
|
505
|
+
nrs?: number | null | undefined;
|
|
506
|
+
orient?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 90 | 180 | 270 | null | undefined;
|
|
507
|
+
or?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 90 | 180 | 270 | null | undefined;
|
|
508
|
+
padBottom?: number | null | undefined;
|
|
509
|
+
padLeft?: number | null | undefined;
|
|
510
|
+
padRight?: number | null | undefined;
|
|
511
|
+
padTop?: number | null | undefined;
|
|
512
|
+
pad?: number | null | undefined;
|
|
513
|
+
page?: number | null | undefined;
|
|
514
|
+
palette?: "json" | "css" | null | undefined;
|
|
515
|
+
pdfAnnotation?: boolean | null | undefined;
|
|
516
|
+
annotation?: boolean | null | undefined;
|
|
517
|
+
prefix?: string | null | undefined;
|
|
518
|
+
px?: number | null | undefined;
|
|
519
|
+
q?: number | null | undefined;
|
|
520
|
+
rect?: [number | "left" | "right" | "center", number | "top" | "bottom" | "middle", number, number] | null | undefined;
|
|
521
|
+
rot?: number | null | undefined;
|
|
522
|
+
sat?: number | null | undefined;
|
|
523
|
+
sepia?: number | null | undefined;
|
|
524
|
+
shad?: number | null | undefined;
|
|
525
|
+
sharp?: number | null | undefined;
|
|
526
|
+
transparency?: "grid" | null | undefined;
|
|
527
|
+
trimColor?: string | null | undefined;
|
|
528
|
+
trimcolor?: string | null | undefined;
|
|
529
|
+
trimMd?: number | null | undefined;
|
|
530
|
+
trimmd?: number | null | undefined;
|
|
531
|
+
trimPad?: number | null | undefined;
|
|
532
|
+
trimpad?: number | null | undefined;
|
|
533
|
+
trimSd?: number | null | undefined;
|
|
534
|
+
trimsd?: number | null | undefined;
|
|
535
|
+
trimTol?: number | null | undefined;
|
|
536
|
+
trimtol?: number | null | undefined;
|
|
537
|
+
trim?: "color" | "auto" | null | undefined;
|
|
538
|
+
txtAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
539
|
+
txtalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
540
|
+
ta?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
541
|
+
txtClip?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
542
|
+
txtclip?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
543
|
+
tcl?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
544
|
+
txtColor?: string | null | undefined;
|
|
545
|
+
txtcolor?: string | null | undefined;
|
|
546
|
+
txtClr?: string | null | undefined;
|
|
547
|
+
txtclr?: string | null | undefined;
|
|
548
|
+
tc?: string | null | undefined;
|
|
549
|
+
txtFit?: "max" | null | undefined;
|
|
550
|
+
txtfit?: "max" | null | undefined;
|
|
551
|
+
txtFont?: import("imgix-url-builder").Font | null | undefined;
|
|
552
|
+
tf?: import("imgix-url-builder").Font | null | undefined;
|
|
553
|
+
txtfont?: import("imgix-url-builder").Font | null | undefined;
|
|
554
|
+
txtLead?: number | null | undefined;
|
|
555
|
+
txtlead?: number | null | undefined;
|
|
556
|
+
txtLig?: 0 | 1 | 2 | null | undefined;
|
|
557
|
+
txtlig?: 0 | 1 | 2 | null | undefined;
|
|
558
|
+
txtLineColor?: string | null | undefined;
|
|
559
|
+
txtlinecolor?: string | null | undefined;
|
|
560
|
+
txtLineClr?: string | null | undefined;
|
|
561
|
+
txtlineclr?: string | null | undefined;
|
|
562
|
+
txtLine?: number | null | undefined;
|
|
563
|
+
txtline?: number | null | undefined;
|
|
564
|
+
tl?: number | null | undefined;
|
|
565
|
+
txtPad?: number | null | undefined;
|
|
566
|
+
txtpad?: number | null | undefined;
|
|
567
|
+
tp?: number | null | undefined;
|
|
568
|
+
txtShad?: number | null | undefined;
|
|
569
|
+
txtshad?: number | null | undefined;
|
|
570
|
+
tsh?: number | null | undefined;
|
|
571
|
+
txtSize?: number | null | undefined;
|
|
572
|
+
tsz?: number | null | undefined;
|
|
573
|
+
txtsize?: number | null | undefined;
|
|
574
|
+
txtTrack?: number | null | undefined;
|
|
575
|
+
txttrack?: number | null | undefined;
|
|
576
|
+
tt?: number | null | undefined;
|
|
577
|
+
txtWidth?: number | null | undefined;
|
|
578
|
+
txtwidth?: number | null | undefined;
|
|
579
|
+
txt?: string | null | undefined;
|
|
580
|
+
t?: string | null | undefined;
|
|
581
|
+
usm?: number | null | undefined;
|
|
582
|
+
usmrad?: number | null | undefined;
|
|
583
|
+
vib?: number | null | undefined;
|
|
584
|
+
w?: number | null | undefined;
|
|
585
|
+
width?: number | null | undefined;
|
|
586
|
+
s?: string | null | undefined;
|
|
587
|
+
} | undefined;
|
|
135
588
|
/**
|
|
136
589
|
* Declare an image as decorative by providing `alt=""`.
|
|
137
590
|
*
|
package/dist/PrismicImage.js
CHANGED
|
@@ -4,10 +4,9 @@ import { devMsg } from "./lib/devMsg.js";
|
|
|
4
4
|
import { imageThumbnail } from './_node_modules/@prismicio/client/dist/helpers/isFilled.js';
|
|
5
5
|
import { asImageWidthSrcSet } from './_node_modules/@prismicio/client/dist/helpers/asImageWidthSrcSet.js';
|
|
6
6
|
import { asImagePixelDensitySrcSet } from './_node_modules/@prismicio/client/dist/helpers/asImagePixelDensitySrcSet.js';
|
|
7
|
-
const PrismicImage = React.forwardRef(function PrismicImage2(
|
|
8
|
-
const { field, alt, fallbackAlt, imgixParams, widths, pixelDensities, ...restProps } = props;
|
|
7
|
+
const PrismicImage = React.forwardRef(function PrismicImage2({ field, alt, fallbackAlt, imgixParams = {}, widths, pixelDensities, ...restProps }, ref) {
|
|
9
8
|
if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
|
|
10
|
-
if (typeof alt === "string" &&
|
|
9
|
+
if (typeof alt === "string" && alt !== "") {
|
|
11
10
|
console.warn(`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
|
|
12
11
|
}
|
|
13
12
|
if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
|
|
@@ -18,18 +17,24 @@ const PrismicImage = React.forwardRef(function PrismicImage2(props, ref) {
|
|
|
18
17
|
}
|
|
19
18
|
}
|
|
20
19
|
if (imageThumbnail(field)) {
|
|
20
|
+
const resolvedImgixParams = imgixParams;
|
|
21
|
+
for (const x in imgixParams) {
|
|
22
|
+
if (resolvedImgixParams[x] === null) {
|
|
23
|
+
resolvedImgixParams[x] = void 0;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
21
26
|
let src;
|
|
22
27
|
let srcSet;
|
|
23
28
|
if (widths || !pixelDensities) {
|
|
24
29
|
const res = asImageWidthSrcSet(field, {
|
|
25
|
-
...
|
|
30
|
+
...resolvedImgixParams,
|
|
26
31
|
widths: widths === "defaults" ? void 0 : widths
|
|
27
32
|
});
|
|
28
33
|
src = res.src;
|
|
29
34
|
srcSet = res.srcset;
|
|
30
35
|
} else if (pixelDensities) {
|
|
31
36
|
const res = asImagePixelDensitySrcSet(field, {
|
|
32
|
-
...
|
|
37
|
+
...resolvedImgixParams,
|
|
33
38
|
pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
|
|
34
39
|
});
|
|
35
40
|
src = res.src;
|
package/dist/PrismicImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicImage.js","sources":["../../src/PrismicImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\n\nimport { devMsg } from \"./lib/devMsg\";\n\n/**\n * Props for `<PrismicImage>`.\n */\nexport type PrismicImageProps = Omit<\n\tReact.DetailedHTMLProps<\n\t\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\tHTMLImageElement\n\t>,\n\t\"src\" | \"srcset\" | \"alt\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismic.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?:
|
|
1
|
+
{"version":3,"file":"PrismicImage.js","sources":["../../src/PrismicImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\nimport { ImgixURLParams } from \"imgix-url-builder\";\n\nimport { devMsg } from \"./lib/devMsg\";\n\n/**\n * Props for `<PrismicImage>`.\n */\nexport type PrismicImageProps = Omit<\n\tReact.DetailedHTMLProps<\n\t\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\tHTMLImageElement\n\t>,\n\t\"src\" | \"srcset\" | \"alt\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismic.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Widths used to build a `srcset` value for the Image field.\n\t\t\t\t *\n\t\t\t\t * If a `widths` prop is not given or `\"defaults\"` is passed, the\n\t\t\t\t * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,\n\t\t\t\t * 3840.\n\t\t\t\t *\n\t\t\t\t * If the Image field contains responsive views, each responsive view\n\t\t\t\t * can be used as a width in the resulting `srcset` by passing\n\t\t\t\t * `\"thumbnails\"` as the `widths` prop.\n\t\t\t\t */\n\t\t\t\twidths?:\n\t\t\t\t\t| NonNullable<\n\t\t\t\t\t\t\tParameters<typeof prismic.asImageWidthSrcSet>[1]\n\t\t\t\t\t >[\"widths\"]\n\t\t\t\t\t| \"defaults\";\n\t\t\t\t/**\n\t\t\t\t * Not used when the `widths` prop is used.\n\t\t\t\t */\n\t\t\t\tpixelDensities?: never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Not used when the `widths` prop is used.\n\t\t\t\t */\n\t\t\t\twidths?: never;\n\t\t\t\t/**\n\t\t\t\t * Pixel densities used to build a `srcset` value for the Image field.\n\t\t\t\t *\n\t\t\t\t * If a `pixelDensities` prop is passed `\"defaults\"`, the following\n\t\t\t\t * pixel densities will be used: 1, 2, 3.\n\t\t\t\t */\n\t\t\t\tpixelDensities:\n\t\t\t\t\t| NonNullable<\n\t\t\t\t\t\t\tParameters<typeof prismic.asImagePixelDensitySrcSet>[1]\n\t\t\t\t\t >[\"pixelDensities\"]\n\t\t\t\t\t| \"defaults\";\n\t\t }\n\t);\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails. It will automatically set the `alt` attribute using the Image\n * field's `alt` property.\n *\n * By default, a widths-based srcset will be used to support responsive images.\n * This ensures only the smallest image needed for a browser is downloaded.\n *\n * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default\n * pixel densities can be used by using `pixelDensities=\"defaults\"`.\n *\n * **Note**: If you are using a framework that has a native image component,\n * such as Next.js and Gatsby, prefer using those image components instead. They\n * can provide deeper framework integration than `<PrismicImage>`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component for the given Image field.\n */\nexport const PrismicImage = React.forwardRef(function PrismicImage(\n\t{\n\t\tfield,\n\t\talt,\n\t\tfallbackAlt,\n\t\timgixParams = {},\n\t\twidths,\n\t\tpixelDensities,\n\t\t...restProps\n\t}: PrismicImageProps,\n\tref: React.ForwardedRef<HTMLImageElement>,\n): JSX.Element | null {\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (widths && pixelDensities) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] Only one of \"widths\" or \"pixelDensities\" props can be provided. You can resolve this warning by removing either the \"widths\" or \"pixelDensities\" prop. \"widths\" will be used in this case.`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (prismic.isFilled.imageThumbnail(field)) {\n\t\tconst resolvedImgixParams = imgixParams;\n\t\tfor (const x in imgixParams) {\n\t\t\tif (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {\n\t\t\t\tresolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;\n\t\t\t}\n\t\t}\n\n\t\tlet src: string | undefined;\n\t\tlet srcSet: string | undefined;\n\n\t\tif (widths || !pixelDensities) {\n\t\t\tconst res = prismic.asImageWidthSrcSet(field, {\n\t\t\t\t...resolvedImgixParams,\n\t\t\t\twidths: widths === \"defaults\" ? undefined : widths,\n\t\t\t} as ImgixURLParams);\n\n\t\t\tsrc = res.src;\n\t\t\tsrcSet = res.srcset;\n\t\t} else if (pixelDensities) {\n\t\t\tconst res = prismic.asImagePixelDensitySrcSet(field, {\n\t\t\t\t...resolvedImgixParams,\n\t\t\t\tpixelDensities:\n\t\t\t\t\tpixelDensities === \"defaults\" ? undefined : pixelDensities,\n\t\t\t} as ImgixURLParams);\n\n\t\t\tsrc = res.src;\n\t\t\tsrcSet = res.srcset;\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\tref={ref}\n\t\t\t\tsrc={src}\n\t\t\t\tsrcSet={srcSet}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n});\n"],"names":["PrismicImage","prismic.isFilled.imageThumbnail","prismic.asImageWidthSrcSet","prismic.asImagePixelDensitySrcSet"],"mappings":";;;;;;AAyGO,MAAM,eAAe,MAAM,WAAW,SAASA,cACrD,EACC,OACA,KACA,aACA,cAAc,CACd,GAAA,QACA,gBACA,GAAG,aAEJ,KAAyC;AAEzC,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,qQAAqQ,OACpQ,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,qSAAqS,OACpS,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,UAAU,gBAAgB;AAC7B,cAAQ,KACP,2MAA2M;AAAA,IAE5M;AAAA,EACD;AAED,MAAIC,eAAgC,KAAK,GAAG;AAC3C,UAAM,sBAAsB;AAC5B,eAAW,KAAK,aAAa;AACxB,UAAA,oBAAoB,CAAqC,MAAM,MAAM;AACxE,4BAAoB,CAAqC,IAAI;AAAA,MAC7D;AAAA,IACD;AAEG,QAAA;AACA,QAAA;AAEA,QAAA,UAAU,CAAC,gBAAgB;AACxB,YAAA,MAAMC,mBAA2B,OAAO;AAAA,QAC7C,GAAG;AAAA,QACH,QAAQ,WAAW,aAAa,SAAY;AAAA,MAAA,CAC1B;AAEnB,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,eACH,gBAAgB;AACpB,YAAA,MAAMC,0BAAkC,OAAO;AAAA,QACpD,GAAG;AAAA,QACH,gBACC,mBAAmB,aAAa,SAAY;AAAA,MAAA,CAC3B;AAEnB,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,IACb;AAGA,WAAA,oBAAC,OACA,EAAA,KACA,KACA,QACA,KAAK,QAAQ,MAAM,OAAO,cAC1B,GAAI,UAAU,CAAA;AAAA,EAAA,OAGV;AACC,WAAA;AAAA,EACP;AACF,CAAC;"}
|