@prismicio/react 2.7.0 → 2.7.2-alpha.0

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.
Files changed (13) hide show
  1. package/dist/PrismicImage.cjs +10 -5
  2. package/dist/PrismicImage.cjs.map +1 -1
  3. package/dist/PrismicImage.d.ts +456 -3
  4. package/dist/PrismicImage.js +10 -5
  5. package/dist/PrismicImage.js.map +1 -1
  6. package/dist/package.json.cjs +1 -1
  7. package/dist/package.json.js +1 -1
  8. package/dist/usePrismicClient.cjs.map +1 -1
  9. package/dist/usePrismicClient.d.ts +1 -1
  10. package/dist/usePrismicClient.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/PrismicImage.tsx +19 -13
  13. package/src/usePrismicClient.ts +5 -3
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(props, ref) {
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" && props.alt !== "") {
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
- ...imgixParams,
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
- ...imgixParams,
56
+ ...resolvedImgixParams,
52
57
  pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
53
58
  });
54
59
  src = res.src;
package/dist/PrismicImage.cjs.map CHANGED
@@ -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?: Parameters<typeof prismic.asImageSrc>[1];\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\tprops: PrismicImageProps,\n\tref: React.ForwardedRef<HTMLImageElement>,\n): JSX.Element | null {\n\tconst {\n\t\tfield,\n\t\talt,\n\t\tfallbackAlt,\n\t\timgixParams,\n\t\twidths,\n\t\tpixelDensities,\n\t\t...restProps\n\t} = props;\n\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tif (typeof alt === \"string\" && props.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\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...imgixParams,\n\t\t\t\twidths: widths === \"defaults\" ? undefined : widths,\n\t\t\t});\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...imgixParams,\n\t\t\t\tpixelDensities:\n\t\t\t\t\tpixelDensities === \"defaults\" ? undefined : pixelDensities,\n\t\t\t});\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAwGO,MAAM,eAAeA,iBAAM,WAAW,SAASC,cACrD,OACA,KAAyC;AAEnC,QAAA,EACL,OACA,KACA,aACA,aACA,QACA,gBACA,GAAG,UACA,IAAA;AAEJ,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,QAAI,OAAO,QAAQ,YAAY,MAAM,QAAQ,IAAI;AAChD,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;AACvC,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,CAC5C;AAED,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,CAC7C;AAED,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;;"}
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?: Parameters<typeof prismic.asImageSrc>[1];
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?: Parameters<typeof prismic.asImageSrc>[1];
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?: Parameters<typeof prismic.asImageSrc>[1];
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(props, ref) {
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" && props.alt !== "") {
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
- ...imgixParams,
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
- ...imgixParams,
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?: Parameters<typeof prismic.asImageSrc>[1];\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\tprops: PrismicImageProps,\n\tref: React.ForwardedRef<HTMLImageElement>,\n): JSX.Element | null {\n\tconst {\n\t\tfield,\n\t\talt,\n\t\tfallbackAlt,\n\t\timgixParams,\n\t\twidths,\n\t\tpixelDensities,\n\t\t...restProps\n\t} = props;\n\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tif (typeof alt === \"string\" && props.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\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...imgixParams,\n\t\t\t\twidths: widths === \"defaults\" ? undefined : widths,\n\t\t\t});\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...imgixParams,\n\t\t\t\tpixelDensities:\n\t\t\t\t\tpixelDensities === \"defaults\" ? undefined : pixelDensities,\n\t\t\t});\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":";;;;;;AAwGO,MAAM,eAAe,MAAM,WAAW,SAASA,cACrD,OACA,KAAyC;AAEnC,QAAA,EACL,OACA,KACA,aACA,aACA,QACA,gBACA,GAAG,UACA,IAAA;AAEJ,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,QAAI,OAAO,QAAQ,YAAY,MAAM,QAAQ,IAAI;AAChD,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;AACvC,QAAA;AACA,QAAA;AAEA,QAAA,UAAU,CAAC,gBAAgB;AACxB,YAAA,MAAMC,mBAA2B,OAAO;AAAA,QAC7C,GAAG;AAAA,QACH,QAAQ,WAAW,aAAa,SAAY;AAAA,MAAA,CAC5C;AAED,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,eACH,gBAAgB;AACpB,YAAA,MAAMC,0BAAkC,OAAO;AAAA,QACpD,GAAG;AAAA,QACH,gBACC,mBAAmB,aAAa,SAAY;AAAA,MAAA,CAC7C;AAED,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;"}
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;"}
package/dist/package.json.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const version = "2.7.0";
3
+ const version = "2.7.2-alpha.0";
4
4
  exports.version = version;
5
5
  //# sourceMappingURL=package.json.cjs.map
package/dist/package.json.js CHANGED
@@ -1,4 +1,4 @@
1
- const version = "2.7.0";
1
+ const version = "2.7.2-alpha.0";
2
2
  export {
3
3
  version
4
4
  };
package/dist/usePrismicClient.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePrismicClient.cjs","sources":["../../src/usePrismicClient.ts"],"sourcesContent":["import type * as prismic from \"@prismicio/client\";\n\nimport { usePrismicContext } from \"./usePrismicContext\";\n\n/**\n * Retrieve the `@prismicio/client` instance provided to `<PrismicProvider>`\n * higher in the React tree.\n *\n * @param explicitClient - An optional `@prismicio/client` instance to override\n * the Client provided to `<PrismicProvider>`.\n *\n * @returns The `@prismicio/client` instance provided to `<PrismicProvider>`.\n */\nexport const usePrismicClient = (\n\texplicitClient?: prismic.Client,\n): prismic.Client => {\n\tconst context = usePrismicContext();\n\n\tconst client = explicitClient || context?.client;\n\n\tif (!client) {\n\t\tthrow new Error(\n\t\t\t\"A @prismicio/client is required to query documents. Provide a client to the hook or to a <PrismicProvider> higher in your component tree.\",\n\t\t);\n\t}\n\n\treturn client;\n};\n"],"names":["usePrismicContext"],"mappings":";;;AAaa,MAAA,mBAAmB,CAC/B,mBACmB;AACnB,QAAM,UAAUA,kBAAAA;AAEV,QAAA,SAAS,mBAAkB,mCAAS;AAE1C,MAAI,CAAC,QAAQ;AACN,UAAA,IAAI,MACT,2IAA2I;AAAA,EAE5I;AAEM,SAAA;AACR;;"}
1
+ {"version":3,"file":"usePrismicClient.cjs","sources":["../../src/usePrismicClient.ts"],"sourcesContent":["import type * as prismic from \"@prismicio/client\";\n\nimport { usePrismicContext } from \"./usePrismicContext\";\n\n/**\n * Retrieve the `@prismicio/client` instance provided to `<PrismicProvider>`\n * higher in the React tree.\n *\n * @param explicitClient - An optional `@prismicio/client` instance to override\n * the Client provided to `<PrismicProvider>`.\n *\n * @returns The `@prismicio/client` instance provided to `<PrismicProvider>`.\n */\nexport const usePrismicClient = <\n\tTDocuments extends prismic.PrismicDocument = prismic.PrismicDocument,\n>(\n\texplicitClient?: prismic.Client<TDocuments>,\n): prismic.Client<TDocuments> => {\n\tconst context = usePrismicContext();\n\n\tconst client = explicitClient || context?.client;\n\n\tif (!client) {\n\t\tthrow new Error(\n\t\t\t\"A @prismicio/client is required to query documents. Provide a client to the hook or to a <PrismicProvider> higher in your component tree.\",\n\t\t);\n\t}\n\n\treturn client;\n};\n"],"names":["usePrismicContext"],"mappings":";;;AAaa,MAAA,mBAAmB,CAG/B,mBAC+B;AAC/B,QAAM,UAAUA,kBAAAA;AAEV,QAAA,SAAS,mBAAkB,mCAAS;AAE1C,MAAI,CAAC,QAAQ;AACN,UAAA,IAAI,MACT,2IAA2I;AAAA,EAE5I;AAEM,SAAA;AACR;;"}
package/dist/usePrismicClient.d.ts CHANGED
@@ -8,4 +8,4 @@ import type * as prismic from "@prismicio/client";
8
8
  *
9
9
  * @returns The `@prismicio/client` instance provided to `<PrismicProvider>`.
10
10
  */
11
- export declare const usePrismicClient: (explicitClient?: prismic.Client) => prismic.Client;
11
+ export declare const usePrismicClient: <TDocuments extends prismic.PrismicDocument<Record<string, any>, string, string> = prismic.PrismicDocument<Record<string, any>, string, string>>(explicitClient?: prismic.Client<TDocuments> | undefined) => prismic.Client<TDocuments>;
package/dist/usePrismicClient.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePrismicClient.js","sources":["../../src/usePrismicClient.ts"],"sourcesContent":["import type * as prismic from \"@prismicio/client\";\n\nimport { usePrismicContext } from \"./usePrismicContext\";\n\n/**\n * Retrieve the `@prismicio/client` instance provided to `<PrismicProvider>`\n * higher in the React tree.\n *\n * @param explicitClient - An optional `@prismicio/client` instance to override\n * the Client provided to `<PrismicProvider>`.\n *\n * @returns The `@prismicio/client` instance provided to `<PrismicProvider>`.\n */\nexport const usePrismicClient = (\n\texplicitClient?: prismic.Client,\n): prismic.Client => {\n\tconst context = usePrismicContext();\n\n\tconst client = explicitClient || context?.client;\n\n\tif (!client) {\n\t\tthrow new Error(\n\t\t\t\"A @prismicio/client is required to query documents. Provide a client to the hook or to a <PrismicProvider> higher in your component tree.\",\n\t\t);\n\t}\n\n\treturn client;\n};\n"],"names":[],"mappings":";AAaa,MAAA,mBAAmB,CAC/B,mBACmB;AACnB,QAAM,UAAU;AAEV,QAAA,SAAS,mBAAkB,mCAAS;AAE1C,MAAI,CAAC,QAAQ;AACN,UAAA,IAAI,MACT,2IAA2I;AAAA,EAE5I;AAEM,SAAA;AACR;"}
1
+ {"version":3,"file":"usePrismicClient.js","sources":["../../src/usePrismicClient.ts"],"sourcesContent":["import type * as prismic from \"@prismicio/client\";\n\nimport { usePrismicContext } from \"./usePrismicContext\";\n\n/**\n * Retrieve the `@prismicio/client` instance provided to `<PrismicProvider>`\n * higher in the React tree.\n *\n * @param explicitClient - An optional `@prismicio/client` instance to override\n * the Client provided to `<PrismicProvider>`.\n *\n * @returns The `@prismicio/client` instance provided to `<PrismicProvider>`.\n */\nexport const usePrismicClient = <\n\tTDocuments extends prismic.PrismicDocument = prismic.PrismicDocument,\n>(\n\texplicitClient?: prismic.Client<TDocuments>,\n): prismic.Client<TDocuments> => {\n\tconst context = usePrismicContext();\n\n\tconst client = explicitClient || context?.client;\n\n\tif (!client) {\n\t\tthrow new Error(\n\t\t\t\"A @prismicio/client is required to query documents. Provide a client to the hook or to a <PrismicProvider> higher in your component tree.\",\n\t\t);\n\t}\n\n\treturn client;\n};\n"],"names":[],"mappings":";AAaa,MAAA,mBAAmB,CAG/B,mBAC+B;AAC/B,QAAM,UAAU;AAEV,QAAA,SAAS,mBAAkB,mCAAS;AAE1C,MAAI,CAAC,QAAQ;AACN,UAAA,IAAI,MACT,2IAA2I;AAAA,EAE5I;AAEM,SAAA;AACR;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prismicio/react",
3
- "version": "2.7.0",
3
+ "version": "2.7.2-alpha.0",
4
4
  "description": "React components and hooks to fetch and present Prismic content",
5
5
  "keywords": [
6
6
  "typescript",
package/src/PrismicImage.tsx 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
  import { devMsg } from "./lib/devMsg";
5
6
 
@@ -23,7 +24,7 @@ export type PrismicImageProps = Omit<
23
24
  *
24
25
  * See: https://docs.imgix.com/apis/rendering
25
26
  */
26
- imgixParams?: Parameters<typeof prismic.asImageSrc>[1];
27
+ imgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };
27
28
 
28
29
  /**
29
30
  * Declare an image as decorative by providing `alt=""`.
@@ -103,24 +104,22 @@ export type PrismicImageProps = Omit<
103
104
  * @returns A responsive image component for the given Image field.
104
105
  */
105
106
  export const PrismicImage = React.forwardRef(function PrismicImage(
106
- props: PrismicImageProps,
107
- ref: React.ForwardedRef<HTMLImageElement>,
108
- ): JSX.Element | null {
109
- const {
107
+ {
110
108
  field,
111
109
  alt,
112
110
  fallbackAlt,
113
- imgixParams,
111
+ imgixParams = {},
114
112
  widths,
115
113
  pixelDensities,
116
114
  ...restProps
117
- } = props;
118
-
115
+ }: PrismicImageProps,
116
+ ref: React.ForwardedRef<HTMLImageElement>,
117
+ ): JSX.Element | null {
119
118
  if (
120
119
  typeof process !== "undefined" &&
121
120
  process.env.NODE_ENV === "development"
122
121
  ) {
123
- if (typeof alt === "string" && props.alt !== "") {
122
+ if (typeof alt === "string" && alt !== "") {
124
123
  console.warn(
125
124
  `[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(
126
125
  "alt-must-be-an-empty-string",
@@ -144,23 +143,30 @@ export const PrismicImage = React.forwardRef(function PrismicImage(
144
143
  }
145
144
 
146
145
  if (prismic.isFilled.imageThumbnail(field)) {
146
+ const resolvedImgixParams = imgixParams;
147
+ for (const x in imgixParams) {
148
+ if (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {
149
+ resolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;
150
+ }
151
+ }
152
+
147
153
  let src: string | undefined;
148
154
  let srcSet: string | undefined;
149
155
 
150
156
  if (widths || !pixelDensities) {
151
157
  const res = prismic.asImageWidthSrcSet(field, {
152
- ...imgixParams,
158
+ ...resolvedImgixParams,
153
159
  widths: widths === "defaults" ? undefined : widths,
154
- });
160
+ } as ImgixURLParams);
155
161
 
156
162
  src = res.src;
157
163
  srcSet = res.srcset;
158
164
  } else if (pixelDensities) {
159
165
  const res = prismic.asImagePixelDensitySrcSet(field, {
160
- ...imgixParams,
166
+ ...resolvedImgixParams,
161
167
  pixelDensities:
162
168
  pixelDensities === "defaults" ? undefined : pixelDensities,
163
- });
169
+ } as ImgixURLParams);
164
170
 
165
171
  src = res.src;
166
172
  srcSet = res.srcset;
package/src/usePrismicClient.ts CHANGED
@@ -11,9 +11,11 @@ import { usePrismicContext } from "./usePrismicContext";
11
11
  *
12
12
  * @returns The `@prismicio/client` instance provided to `<PrismicProvider>`.
13
13
  */
14
- export const usePrismicClient = (
15
- explicitClient?: prismic.Client,
16
- ): prismic.Client => {
14
+ export const usePrismicClient = <
15
+ TDocuments extends prismic.PrismicDocument = prismic.PrismicDocument,
16
+ >(
17
+ explicitClient?: prismic.Client<TDocuments>,
18
+ ): prismic.Client<TDocuments> => {
17
19
  const context = usePrismicContext();
18
20
 
19
21
  const client = explicitClient || context?.client;