@chakra-ui/image/dist/chunk-QINAG4RG.mjs.map

React component for progressive image loading

{"version":3,"sources":["../src/image.tsx","../../../utilities/object-utils/src/omit.ts"],"sourcesContent":["import {\n  chakra,\n  SystemProps,\n  forwardRef,\n  HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { omit } from \"@chakra-ui/object-utils\"\nimport {\n  FallbackStrategy,\n  shouldShowFallbackImage,\n  useImage,\n  UseImageProps,\n} from \"./use-image\"\nimport { NativeImage, NativeImageOptions } from \"./native-image\"\n\ninterface ImageOptions extends NativeImageOptions {\n  /**\n   * Fallback image `src` to show if image is loading or image fails.\n   *\n   * Note 🚨: We recommend you use a local image\n   */\n  fallbackSrc?: string\n  /**\n   * Fallback element to show if image is loading or image fails.\n   * @type React.ReactElement\n   */\n  fallback?: React.ReactElement\n  /**\n   * Defines loading strategy\n   */\n  loading?: \"eager\" | \"lazy\"\n  /**\n   * How the image to fit within its bounds.\n   * It maps to css `object-fit` property.\n   * @type SystemProps[\"objectFit\"]\n   */\n  fit?: SystemProps[\"objectFit\"]\n  /**\n   * How to align the image within its bounds.\n   * It maps to css `object-position` property.\n   * @type SystemProps[\"objectPosition\"]\n   */\n  align?: SystemProps[\"objectPosition\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   *\n   * @default false\n   */\n  ignoreFallback?: boolean\n\n  /**\n   * - beforeLoadOrError(default): loads the fallbackImage while loading the src\n   * - onError: loads the fallbackImage only if there is an error fetching the src\n   *\n   * @default \"beforeLoadOrError\"\n   * @see Issue https://github.com/chakra-ui/chakra-ui/issues/5581\n   */\n  fallbackStrategy?: FallbackStrategy\n  /**\n   * Defining which referrer is sent when fetching the resource.\n   * @type React.HTMLAttributeReferrerPolicy\n   */\n  referrerPolicy?: React.HTMLAttributeReferrerPolicy\n}\n\nexport interface ImageProps\n  extends UseImageProps,\n    Omit<HTMLChakraProps<\"img\">, keyof UseImageProps>,\n    ImageOptions {}\n\n/**\n * React component that renders an image with support\n * for fallbacks\n *\n * @see Docs https://chakra-ui.com/image\n */\nexport const Image = forwardRef<ImageProps, \"img\">(function Image(props, ref) {\n  const {\n    fallbackSrc,\n    fallback,\n    src,\n    srcSet,\n    align,\n    fit,\n    loading,\n    ignoreFallback,\n    crossOrigin,\n    fallbackStrategy = \"beforeLoadOrError\",\n    referrerPolicy,\n    ...rest\n  } = props\n\n  const providedFallback = fallbackSrc !== undefined || fallback !== undefined\n  /**\n   * Defer to native `img` tag if `loading` prop is passed\n   * @see https://github.com/chakra-ui/chakra-ui/issues/1027\n   *\n   * shouldIgnoreFallbackImage determines if we have the possibility to render a fallback image\n   */\n  const shouldIgnoreFallbackImage =\n    loading != null ||\n    // use can opt out of fallback image\n    ignoreFallback ||\n    // if the user doesn't provide any kind of fallback we should ignore it\n    !providedFallback\n\n  /**\n   * returns `loaded` if fallback is ignored\n   */\n  const status = useImage({\n    ...props,\n    crossOrigin,\n    ignoreFallback: shouldIgnoreFallbackImage,\n  })\n\n  const showFallbackImage = shouldShowFallbackImage(status, fallbackStrategy)\n\n  const shared = {\n    ref,\n    objectFit: fit,\n    objectPosition: align,\n    ...(shouldIgnoreFallbackImage ? rest : omit(rest, [\"onError\", \"onLoad\"])),\n  }\n\n  if (showFallbackImage) {\n    /**\n     * If user passed a custom fallback component,\n     * let's render it here.\n     */\n    if (fallback) return fallback\n\n    return (\n      <chakra.img\n        as={NativeImage}\n        className=\"chakra-image__placeholder\"\n        src={fallbackSrc}\n        {...shared}\n      />\n    )\n  }\n\n  return (\n    <chakra.img\n      as={NativeImage}\n      src={src}\n      srcSet={srcSet}\n      crossOrigin={crossOrigin}\n      loading={loading}\n      referrerPolicy={referrerPolicy}\n      className=\"chakra-image\"\n      {...shared}\n    />\n  )\n})\n\nImage.displayName = \"Image\"\n","export function omit<T extends Record<string, any>, K extends keyof T>(\n  object: T,\n  keysToOmit: K[] = [],\n) {\n  const clone: Record<string, unknown> = Object.assign({}, object)\n  for (const key of keysToOmit) {\n    if (key in clone) {\n      delete clone[key as string]\n    }\n  }\n  return clone as Omit<T, K>\n}\n"],"mappings":";;;;;;;;;;AAAA;AAAA,EACE;AAAA,EAEA;AAAA,OAEK;;;ACLA,SAAS,KACd,QACA,aAAkB,CAAC,GACnB;AACA,QAAM,QAAiC,OAAO,OAAO,CAAC,GAAG,MAAM;AAC/D,aAAW,OAAO,YAAY;AAC5B,QAAI,OAAO,OAAO;AAChB,aAAO,MAAM,GAAa;AAAA,IAC5B;AAAA,EACF;AACA,SAAO;AACT;;;ADyHM;AAxDC,IAAM,QAAQ,WAA8B,SAASA,OAAM,OAAO,KAAK;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB,gBAAgB,UAAa,aAAa;AAOnE,QAAM,4BACJ,WAAW;AAAA,EAEX;AAAA,EAEA,CAAC;AAKH,QAAM,SAAS,SAAS;AAAA,IACtB,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,oBAAoB,wBAAwB,QAAQ,gBAAgB;AAE1E,QAAM,SAAS;AAAA,IACb;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,GAAI,4BAA4B,OAAO,KAAK,MAAM,CAAC,WAAW,QAAQ,CAAC;AAAA,EACzE;AAEA,MAAI,mBAAmB;AAKrB,QAAI;AAAU,aAAO;AAErB,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,KAAK;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,MAAM,cAAc;","names":["Image"]}