@bigbinary/neeto-image-uploader-frontend 4.0.3 → 4.0.5

package/dist/index-krkZ4CNS.js

@@ -0,0 +1,969 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useCallback, createElement, useEffect } from 'react';
+import { isPresent, noop } from '@bigbinary/neeto-cist';
+import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
+import NeetoUIModal from '@bigbinary/neetoui/Modal';
+import Tab from '@bigbinary/neetoui/Tab';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import Toastr from '@bigbinary/neetoui/Toastr';
+import Typography from '@bigbinary/neetoui/Typography';
+import { mergeRight, isEmpty, equals } from 'ramda';
+import { useTranslation, Trans } from 'react-i18next';
+import { a as isNilOrEmpty, g as getAspectRatio, b as getPixels, c as getHeightFromAspectRatio, d as getWidthFromAspectRatio, e as getInitialCropSize, f as getPercentage, h as getWrapperRefStyles, j as isItemsCenter, k as getCloudFlareCroppedURL, l as getImageKitCroppedURL, m as getCropValues, D as DEFAULT_UPLOAD_CONFIG, I as ImageDirectUpload } from './utils-DyCNC3w5.js';
+import { u as useImageUploader, a as useCreateBlob, i as isGif, g as generateASCIIFileName } from './useImageUploader-D8luC4Qw.js';
+import { u as useUploadDropzone } from './useUploadDropzone-8Xa8PI-1.js';
+import { I as IS_DEVELOPMENT_OR_HEROKU_ENV, C as CLOUD_FLARE } from './imagekit.esm-IYQEzBnD.js';
+import { R as ReactCrop_minExports, u as useCropImage, a as ReactCrop, b as useBulkDestroyAssets, _ as _default, c as useFetchAssets, d as useFetchUnsplashImages, e as unsplashApi } from './useUnsplashApi-D_ekWD8p.js';
+import { D as DEFAULT_CROP_CONFIG, a as INFINITE_SCROLLER_STYLE, b as INFINITE_SCROLLER_SIZES, T as TABS, A as ASSETS_DESTROY_URL, c as IMAGES_PER_PAGE, d as ASSETS_FETCH_URL, U as UNSPLASH_DEFAULT_NAME, e as UNSPLASH_DEFAULT_REQUEST_CONFIG, f as UNSPLASH_URL } from './constants-Csle2bxb.js';
+import classnames from 'classnames';
+import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
+import Button from '@bigbinary/neetoui/Button';
+import { withT, useFuncDebounce, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { withEventTargetValue, hasPermission } from '@bigbinary/neeto-commons-frontend/utils';
+import Input from '@bigbinary/neetoui/Input';
+import Switch from '@bigbinary/neetoui/Switch';
+import Label from '@bigbinary/neetoui/Label';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import NoData from '@bigbinary/neetoui/NoData';
+import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
+import { VIEW_ROLES_PERMISSION } from '@bigbinary/neeto-team-members-frontend/constants';
+import Alert from '@bigbinary/neetoui/Alert';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+
+var constructCloudflareImageURL = function constructCloudflareImageURL(url) {
+  var domain = window.location.host.split(".").slice(-2).join(".");
+  return url.replace("https://imagedelivery.net", "https://images.".concat(domain, "/cdn-cgi/imagedelivery"));
+};
+
+var Controls = withT(function (_ref) {
+  var _imageRef$current, _imageRef$current2;
+  var t = _ref.t,
+    crop = _ref.crop,
+    handleSubmit = _ref.handleSubmit,
+    imageRef = _ref.imageRef,
+    isFullImage = _ref.isFullImage,
+    setIsFullImage = _ref.setIsFullImage,
+    _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    handleWidthChange = _ref.handleWidthChange,
+    handleHeightChange = _ref.handleHeightChange,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col space-y-6 p-4 md:w-2/6",
+    children: [!hideControls && /*#__PURE__*/jsx(Switch, {
+      checked: isFullImage,
+      className: "w-full",
+      label: t("neetoImageUploader.labels.selectOriginalImage"),
+      onChange: function onChange() {
+        return setIsFullImage(function (isFullImage) {
+          return !isFullImage;
+        });
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.width")
+      }), /*#__PURE__*/jsx(Input, {
+        className: "w-32 grow-0",
+        disabled: isFullImage,
+        max: (_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.naturalWidth,
+        type: "number",
+        value: width,
+        onChange: withEventTargetValue(handleWidthChange)
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.height")
+      }), /*#__PURE__*/jsx(Input, {
+        className: "w-32 grow-0",
+        disabled: isFullImage,
+        max: (_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.naturalHeight,
+        type: "number",
+        value: height,
+        onChange: withEventTargetValue(handleHeightChange)
+      })]
+    }), /*#__PURE__*/jsx(Button, {
+      className: "mt-6 self-start",
+      "data-testid": "neeto-image-uploader-crop-submit-button",
+      label: t("neetoImageUploader.labels.done"),
+      disabled: isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
+      onClick: handleSubmit
+    })]
+  });
+});
+
+var useImageControls = function useImageControls(_ref) {
+  var _imageRef$current;
+  var imageRef = _ref.imageRef,
+    fixedAspectRatio = _ref.fixedAspectRatio,
+    defaultImageSize = _ref.defaultImageSize;
+  var _ref2 = (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 ? _imageRef$current : {},
+    imageWidth = _ref2.naturalWidth,
+    imageHeight = _ref2.naturalHeight;
+  var _useState = useState(isPresent(fixedAspectRatio)),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAspectRatioLocked = _useState2[0],
+    setIsAspectRatioLocked = _useState2[1];
+  var _useState3 = useState(DEFAULT_CROP_CONFIG),
+    _useState4 = _slicedToArray(_useState3, 2),
+    crop = _useState4[0],
+    setCrop = _useState4[1];
+  var _useState5 = useState(getAspectRatio({
+      fixedAspectRatio: fixedAspectRatio,
+      imageSize: defaultImageSize
+    })),
+    _useState6 = _slicedToArray(_useState5, 2),
+    aspectRatio = _useState6[0],
+    setAspectRatio = _useState6[1];
+  var _useState7 = useState(getPixels(crop.height, imageHeight)),
+    _useState8 = _slicedToArray(_useState7, 2),
+    height = _useState8[0],
+    setHeight = _useState8[1];
+  var _useState9 = useState(getPixels(crop.width, imageWidth)),
+    _useState10 = _slicedToArray(_useState9, 2),
+    width = _useState10[0],
+    setWidth = _useState10[1];
+  var aspectRatioFactor = aspectRatio.width / aspectRatio.height;
+  var buildCropValues = function buildCropValues(_ref3) {
+    var cropWidth = _ref3.cropWidth,
+      cropHeight = _ref3.cropHeight,
+      _ref3$width = _ref3.width,
+      width = _ref3$width === void 0 ? imageWidth : _ref3$width,
+      _ref3$height = _ref3.height,
+      height = _ref3$height === void 0 ? imageHeight : _ref3$height,
+      _ref3$aspectRatio = _ref3.aspectRatio,
+      aspectRatio = _ref3$aspectRatio === void 0 ? aspectRatioFactor : _ref3$aspectRatio;
+    var aspectCrop = ReactCrop_minExports.makeAspectCrop({
+      unit: "%",
+      width: getPercentage(cropWidth, width),
+      height: getPercentage(cropHeight, height)
+    }, aspectRatio, width, height);
+    return ReactCrop_minExports.centerCrop(aspectCrop, width, height);
+  };
+  var onToggleAspectRatioLock = function onToggleAspectRatioLock() {
+    setIsAspectRatioLocked(function (isAspectRatioLocked) {
+      return !isAspectRatioLocked;
+    });
+  };
+  var handleWidthChange = function handleWidthChange(width) {
+    var adjustedWidth = Math.min(width, imageWidth);
+    setWidth(adjustedWidth);
+    handleWidthResize(adjustedWidth);
+  };
+  var handleHeightChange = function handleHeightChange(height) {
+    var adjustedHeight = Math.min(height, imageHeight);
+    setHeight(adjustedHeight);
+    handleHeighthResize(height);
+  };
+  var handleResize = function handleResize(cropWidth, cropHeight) {
+    var aspectRatio = aspectRatioFactor;
+    if (!isAspectRatioLocked) {
+      var imageSize = {
+        width: cropWidth,
+        height: cropHeight
+      };
+      var newAspectRatio = getAspectRatio({
+        imageSize: imageSize
+      });
+      aspectRatio = newAspectRatio.width / newAspectRatio.height;
+      setAspectRatio(newAspectRatio);
+    }
+    var newCrop = buildCropValues({
+      cropWidth: cropWidth,
+      cropHeight: cropHeight,
+      aspectRatio: aspectRatio
+    });
+    setCrop(newCrop);
+    setWidth(cropWidth);
+    setHeight(cropHeight);
+  };
+  var handleWidthResize = useFuncDebounce(function (width) {
+    var cropWidth = Number(width);
+    var cropHeight = Number(height);
+    if (isAspectRatioLocked) {
+      cropHeight = getHeightFromAspectRatio(cropWidth, aspectRatio);
+      if (cropHeight > imageHeight) {
+        cropHeight = imageHeight;
+        cropWidth = getWidthFromAspectRatio(cropHeight, aspectRatio);
+      }
+    }
+    handleResize(cropWidth, cropHeight);
+  }, 300);
+  var handleHeighthResize = useFuncDebounce(function (height) {
+    var cropWidth = Number(width);
+    var cropHeight = Number(height);
+    if (isAspectRatioLocked) {
+      cropWidth = getWidthFromAspectRatio(cropHeight, aspectRatio);
+      if (cropWidth > imageWidth) {
+        cropWidth = imageWidth;
+        cropHeight = getHeightFromAspectRatio(cropWidth, aspectRatio);
+      }
+    }
+    handleResize(cropWidth, cropHeight);
+  }, 300);
+  var handleAspectWidthChange = function handleAspectWidthChange(aspectWidth) {
+    if (aspectWidth <= 0) return;
+    var newWidth = crop.width * (aspectWidth / aspectRatio.width);
+    var updatedAspectWidth = aspectWidth;
+    if (newWidth > 100) {
+      newWidth = 100;
+      updatedAspectWidth = Math.round(newWidth / crop.width * aspectRatio.width);
+    }
+    var newWidthInPixels = getPixels(newWidth, imageWidth);
+    var newCrop = buildCropValues({
+      cropWidth: newWidthInPixels,
+      cropHeight: height,
+      aspectRatio: updatedAspectWidth / aspectRatio.height
+    });
+    setCrop(newCrop);
+    setAspectRatio(mergeRight(aspectRatio, {
+      width: updatedAspectWidth
+    }));
+    setWidth(newWidthInPixels);
+  };
+  var handleAspectHeightChange = function handleAspectHeightChange(aspectHeight) {
+    if (aspectHeight <= 0) return;
+    var newHeight = crop.height * (aspectHeight / aspectRatio.height);
+    var updatedAspectHeight = aspectHeight;
+    if (newHeight > 100) {
+      newHeight = 100;
+      updatedAspectHeight = Math.round(newHeight / crop.height * aspectRatio.height);
+    }
+    var newHeightInPixels = getPixels(newHeight, imageHeight);
+    var newCrop = buildCropValues({
+      cropWidth: width,
+      cropHeight: newHeightInPixels,
+      aspectRatio: aspectRatio.width / updatedAspectHeight
+    });
+    setCrop(newCrop);
+    setAspectRatio(mergeRight(aspectRatio, {
+      height: updatedAspectHeight
+    }));
+    setHeight(newHeightInPixels);
+  };
+  var handleCropChange = function handleCropChange(pixelCrop, percentageCrop) {
+    if (!isAspectRatioLocked) {
+      var _aspectRatio = getAspectRatio({
+        imageSize: {
+          width: Math.round(pixelCrop.width),
+          height: Math.round(pixelCrop.height)
+        }
+      });
+      setAspectRatio(_aspectRatio);
+    }
+    setHeight(getPixels(percentageCrop.height, imageHeight));
+    setWidth(getPixels(percentageCrop.width, imageWidth));
+    setCrop(percentageCrop);
+  };
+  var handleImageLoad = function handleImageLoad(_ref4) {
+    var _defaultImageSize$wid;
+    var image = _ref4.target;
+    var imageWidth = image.naturalWidth,
+      imageHeight = image.naturalHeight;
+    var maxCropWidth = (_defaultImageSize$wid = defaultImageSize.width) !== null && _defaultImageSize$wid !== void 0 ? _defaultImageSize$wid : imageWidth;
+    var aspectRatio = getAspectRatio({
+      fixedAspectRatio: fixedAspectRatio,
+      imageSize: {
+        width: imageWidth,
+        height: imageHeight
+      }
+    });
+    var aspectRatioFactor = aspectRatio.width / aspectRatio.height;
+    var _getInitialCropSize = getInitialCropSize({
+        image: image,
+        aspectRatioFactor: aspectRatioFactor,
+        maxCropWidth: maxCropWidth
+      }),
+      cropWidth = _getInitialCropSize.cropWidth,
+      cropHeight = _getInitialCropSize.cropHeight;
+    var crop = buildCropValues({
+      cropWidth: cropWidth,
+      cropHeight: cropHeight,
+      width: imageWidth,
+      height: imageHeight,
+      aspectRatio: aspectRatioFactor
+    });
+    setAspectRatio(aspectRatio);
+    setCrop(crop);
+    setHeight(getPixels(crop.height, imageHeight));
+    setWidth(getPixels(crop.width, imageWidth));
+  };
+  return {
+    onToggleAspectRatioLock: onToggleAspectRatioLock,
+    handleWidthChange: handleWidthChange,
+    handleHeightChange: handleHeightChange,
+    handleAspectWidthChange: handleAspectWidthChange,
+    handleAspectHeightChange: handleAspectHeightChange,
+    aspectRatio: aspectRatio,
+    width: width,
+    crop: crop,
+    height: height,
+    handleImageLoad: handleImageLoad,
+    handleCropChange: handleCropChange,
+    isAspectRatioLocked: isAspectRatioLocked
+  };
+};
+
+var ImageEditor = function ImageEditor(_ref) {
+  var _imageRef$current;
+  var image = _ref.image,
+    handleReset = _ref.handleReset,
+    _ref$handleImageEditC = _ref.handleImageEditComplete,
+    handleImageEditComplete = _ref$handleImageEditC === void 0 ? noop : _ref$handleImageEditC,
+    _ref$signedId = _ref.signedId,
+    signedId = _ref$signedId === void 0 ? "" : _ref$signedId,
+    _ref$fixedAspectRatio = _ref.fixedAspectRatio,
+    fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio,
+    _ref$defaultImageSize = _ref.defaultImageSize,
+    defaultImageSize = _ref$defaultImageSize === void 0 ? {} : _ref$defaultImageSize;
+  var imageRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var _ref2 = (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 ? _imageRef$current : {},
+    imageWidth = _ref2.naturalWidth,
+    imageHeight = _ref2.naturalHeight;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFullImage = _useState2[0],
+    setIsFullImage = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useCropImage = useCropImage(),
+    cropImage = _useCropImage.mutate;
+  var _useImageControls = useImageControls({
+      fixedAspectRatio: fixedAspectRatio,
+      defaultImageSize: defaultImageSize,
+      imageRef: imageRef
+    }),
+    onToggleAspectRatioLock = _useImageControls.onToggleAspectRatioLock,
+    handleWidthChange = _useImageControls.handleWidthChange,
+    handleHeightChange = _useImageControls.handleHeightChange,
+    handleAspectWidthChange = _useImageControls.handleAspectWidthChange,
+    handleAspectHeightChange = _useImageControls.handleAspectHeightChange,
+    aspectRatio = _useImageControls.aspectRatio,
+    width = _useImageControls.width,
+    height = _useImageControls.height,
+    handleImageLoad = _useImageControls.handleImageLoad,
+    handleCropChange = _useImageControls.handleCropChange,
+    crop = _useImageControls.crop,
+    isAspectRatioLocked = _useImageControls.isAspectRatioLocked;
+  var processCrop = function processCrop() {
+    if (isFullImage) {
+      handleImageEditComplete(image);
+      return;
+    }
+    cropImage({
+      crop: getCropValues({
+        crop: crop,
+        imageRef: imageRef
+      }),
+      signedId: signedId
+    }, {
+      onSuccess: handleImageEditComplete
+    });
+  };
+  var handleSubmit = function handleSubmit() {
+    if (IS_DEVELOPMENT_OR_HEROKU_ENV) {
+      processCrop();
+      return;
+    }
+    if (isFullImage) {
+      handleImageEditComplete(image);
+      return;
+    }
+    var newURL = globalProps.assetsUploaderService === CLOUD_FLARE ? getCloudFlareCroppedURL({
+      image: image,
+      crop: crop
+    }) : getImageKitCroppedURL({
+      crop: crop,
+      imageURL: image.url,
+      imageRef: imageRef
+    });
+    handleImageEditComplete(mergeRight(image, {
+      url: newURL
+    }));
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex h-full flex-col gap-4 px-8 py-12",
+    children: [/*#__PURE__*/jsx(Button, {
+      className: "self-start",
+      "data-testid": "image-editor-back-button",
+      icon: LeftArrow,
+      iconPosition: "left",
+      style: "text",
+      onClick: handleReset
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex h-full w-full flex-col gap-2 overflow-y-scroll md:flex-row md:overflow-y-auto",
+      children: [/*#__PURE__*/jsx("div", {
+        id: "imageEditor",
+        ref: wrapperRef,
+        className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", "relative", {
+          "items-center": isItemsCenter({
+            wrapperRef: wrapperRef,
+            imageRef: imageRef
+          })
+        }),
+        children: /*#__PURE__*/jsxs(ReactCrop, {
+          crop: isFullImage ? null : crop,
+          src: image === null || image === void 0 ? void 0 : image.url,
+          style: getWrapperRefStyles(wrapperRef, imageRef),
+          aspect: isAspectRatioLocked ? aspectRatio.width / aspectRatio.height : 0,
+          onChange: handleCropChange,
+          onComplete: handleCropChange,
+          children: [/*#__PURE__*/jsx("img", {
+            alt: t("neetoImageUploader.common.image"),
+            "data-testid": "image-editor-uploaded-image",
+            ref: imageRef,
+            src: image === null || image === void 0 ? void 0 : image.url,
+            onLoad: handleImageLoad
+          }), /*#__PURE__*/jsxs(Typography, {
+            className: "neeto-ui-typography neeto-ui-text-nano neeto-ui-bg-gray-500 absolute bottom-0 end-0 z-10",
+            style: "nano",
+            children: [imageWidth, "x", imageHeight]
+          })]
+        })
+      }), /*#__PURE__*/jsx(Controls, {
+        aspectRatio: aspectRatio,
+        crop: crop,
+        handleAspectHeightChange: handleAspectHeightChange,
+        handleAspectWidthChange: handleAspectWidthChange,
+        handleHeightChange: handleHeightChange,
+        handleSubmit: handleSubmit,
+        handleWidthChange: handleWidthChange,
+        height: height,
+        imageRef: imageRef,
+        isAspectRatioLocked: isAspectRatioLocked,
+        isFullImage: isFullImage,
+        onToggleAspectRatioLock: onToggleAspectRatioLock,
+        setIsFullImage: setIsFullImage,
+        width: width,
+        hideControls: isPresent(fixedAspectRatio)
+      })]
+    })]
+  });
+};
+
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
+var InfiniteScroller = function InfiniteScroller(_ref) {
+  var _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
+    _ref$loadMore = _ref.loadMore,
+    loadMore = _ref$loadMore === void 0 ? noop : _ref$loadMore,
+    tab = _ref.tab,
+    images = _ref.images,
+    _ref$setSelectedImage = _ref.setSelectedImage,
+    setSelectedImage = _ref$setSelectedImage === void 0 ? noop : _ref$setSelectedImage,
+    _ref$handleUnsplashIm = _ref.handleUnsplashImageSelect,
+    handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? noop : _ref$handleUnsplashIm;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState({
+      isOpen: false,
+      imageIds: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    deleteConfirmation = _useState2[0],
+    setDeleteConfirmation = _useState2[1];
+  var isMenuButtonEnabled = globalProps.assetsUploaderService !== CLOUD_FLARE;
+  var _useBulkDestroyAssets = useBulkDestroyAssets(ASSETS_DESTROY_URL),
+    isPending = _useBulkDestroyAssets.isPending,
+    bulkDelete = _useBulkDestroyAssets.mutate;
+  var handleDelete = useCallback(function () {
+    bulkDelete(deleteConfirmation.imageIds, {
+      onSuccess: function onSuccess() {
+        return setDeleteConfirmation({
+          isOpen: false,
+          imageIds: []
+        });
+      }
+    });
+  }, [deleteConfirmation.imageIds]);
+  var Loader = /*#__PURE__*/jsx("div", {
+    className: "flex justify-center",
+    children: /*#__PURE__*/jsx(Spinner, {})
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "niu-unsplash-container grow max-w-full overflow-x-hidden overflow-y-scroll",
+    children: [/*#__PURE__*/jsx(_default, {
+      hasMore: hasMore,
+      loadMore: loadMore,
+      pack: true,
+      position: true,
+      className: "w-full",
+      loader: Loader,
+      sizes: INFINITE_SCROLLER_SIZES,
+      style: INFINITE_SCROLLER_STYLE,
+      useWindow: false,
+      children: images.map(function (image, index) {
+        var _image$urls, _image$user, _image$user2;
+        return /*#__PURE__*/jsx("div", {
+          className: "float-start w-1/2 pb-4 pe-4 md:w-1/4",
+          children: /*#__PURE__*/jsx("div", {
+            className: "relative w-full",
+            style: {
+              paddingBottom: "".concat(image.height / image.width * 100, "%")
+            },
+            children: /*#__PURE__*/jsxs("div", {
+              className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
+              "data-testid": "library-image-card",
+              id: "unsplashImage".concat(image.id),
+              children: [tab === TABS[2].key && /*#__PURE__*/jsxs(Fragment, {
+                children: [/*#__PURE__*/jsx("img", {
+                  "data-testid": "niu-unsplash-image-".concat(index),
+                  src: image === null || image === void 0 || (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
+                  onClick: function onClick() {
+                    return handleUnsplashImageSelect(image);
+                  }
+                }), /*#__PURE__*/jsxs("a", {
+                  className: "neeto-ui-text-gray-100 absolute bottom-2 start-2 m-auto text-xs underline opacity-0 group-hover:opacity-100",
+                  href: "https://unsplash.com/@".concat(image === null || image === void 0 || (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
+                  rel: "noreferrer",
+                  target: "_blank",
+                  children: [image === null || image === void 0 || (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
+                })]
+              }), tab === TABS[1].key && /*#__PURE__*/jsxs(Fragment, {
+                children: [hasPermission(VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsx(Dropdown, {
+                  buttonSize: "small",
+                  buttonStyle: "tertiary",
+                  "data-testid": "image-library-image-options-".concat(index),
+                  icon: MenuHorizontal,
+                  buttonProps: {
+                    className:
+                    // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
+                    "absolute end-2 top-2 z-1 rounded-full"
+                  },
+                  children: /*#__PURE__*/jsx(Menu, {
+                    children: /*#__PURE__*/jsx(MenuItem.Button, {
+                      "data-testid": "image-library-image-delete",
+                      onClick: function onClick() {
+                        return setDeleteConfirmation({
+                          isOpen: true,
+                          imageIds: [(image === null || image === void 0 ? void 0 : image.fileId) || image.id]
+                        });
+                      },
+                      children: t("neetoImageUploader.deleteConfirmation.delete")
+                    })
+                  })
+                }), /*#__PURE__*/jsx("img", {
+                  "data-testid": "niu-library-image-".concat(index),
+                  src: image === null || image === void 0 ? void 0 : image.url,
+                  onClick: function onClick() {
+                    return setSelectedImage(image);
+                  }
+                })]
+              })]
+            })
+          })
+        }, image.id);
+      })
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: deleteConfirmation.isOpen,
+      isSubmitting: isPending,
+      message: t("neetoImageUploader.deleteConfirmation.message"),
+      submitButtonLabel: t("neetoImageUploader.deleteConfirmation.delete"),
+      title: t("neetoImageUploader.deleteConfirmation.title"),
+      onClose: function onClose() {
+        return setDeleteConfirmation({
+          isOpen: false,
+          imageIds: []
+        });
+      },
+      onSubmit: handleDelete
+    })]
+  });
+};
+
+var Images = function Images(_ref) {
+  var debouncedQuery = _ref.debouncedQuery,
+    setSelectedImage = _ref.setSelectedImage;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchAssets = useFetchAssets({
+      searchTerm: debouncedQuery,
+      per: IMAGES_PER_PAGE,
+      url: ASSETS_FETCH_URL
+    }),
+    fetchNextPage = _useFetchAssets.fetchNextPage,
+    hasNextPage = _useFetchAssets.hasNextPage,
+    _useFetchAssets$data = _useFetchAssets.data,
+    _useFetchAssets$data2 = _useFetchAssets$data === void 0 ? {} : _useFetchAssets$data,
+    _useFetchAssets$data3 = _useFetchAssets$data2.results,
+    results = _useFetchAssets$data3 === void 0 ? [] : _useFetchAssets$data3,
+    isLoading = _useFetchAssets.isLoading,
+    isError = _useFetchAssets.isError;
+  if (isError) {
+    return /*#__PURE__*/jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: t("neetoImageUploader.unsplash.errorMessage")
+      })
+    });
+  }
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  if (isEmpty(results)) {
+    return /*#__PURE__*/jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        title: t("neetoImageUploader.common.noImagesToShow")
+      })
+    });
+  }
+  return /*#__PURE__*/createElement(InfiniteScroller, {
+    setSelectedImage: setSelectedImage,
+    hasMore: hasNextPage,
+    images: results,
+    key: debouncedQuery,
+    loadMore: fetchNextPage,
+    tab: TABS[1].key
+  });
+};
+
+var UnsplashLibrary = function UnsplashLibrary(_ref) {
+  var debouncedQuery = _ref.debouncedQuery,
+    setSelectedImage = _ref.setSelectedImage,
+    setIsUploading = _ref.setIsUploading,
+    setActiveTab = _ref.setActiveTab;
+  var _useImageUploader = useImageUploader({
+      onUploadComplete: setSelectedImage,
+      setIsUploading: setIsUploading
+    }),
+    uploadFile = _useImageUploader.uploadFile;
+  var handleUnsplashImageSelect = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
+      var _image$urls, response, file;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            setIsUploading(true);
+            _context.next = 4;
+            return unsplashApi.getUnsplashImage((_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular, UNSPLASH_DEFAULT_REQUEST_CONFIG);
+          case 4:
+            response = _context.sent;
+            file = new File([response.data], UNSPLASH_DEFAULT_NAME, {
+              type: response.data.type
+            });
+            uploadFile(file);
+            _context.next = 14;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            Toastr.error(_context.t0);
+            setActiveTab(TABS[1].key);
+            setIsUploading(false);
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+    return function handleUnsplashImageSelect(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchUnsplashImag = useFetchUnsplashImages({
+      query: debouncedQuery
+    }),
+    fetchNextPage = _useFetchUnsplashImag.fetchNextPage,
+    hasNextPage = _useFetchUnsplashImag.hasNextPage,
+    _useFetchUnsplashImag2 = _useFetchUnsplashImag.data,
+    _useFetchUnsplashImag3 = _useFetchUnsplashImag2 === void 0 ? {} : _useFetchUnsplashImag2,
+    _useFetchUnsplashImag4 = _useFetchUnsplashImag3.results,
+    results = _useFetchUnsplashImag4 === void 0 ? [] : _useFetchUnsplashImag4,
+    isError = _useFetchUnsplashImag.isError,
+    isLoading = _useFetchUnsplashImag.isLoading;
+  if (isError) {
+    return /*#__PURE__*/jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: t("neetoImageUploader.unsplash.errorMessage")
+      })
+    });
+  }
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  if (isEmpty(results)) {
+    return /*#__PURE__*/jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        title: t("neetoImageUploader.common.noImagesToShow")
+      })
+    });
+  }
+  return /*#__PURE__*/createElement(InfiniteScroller, {
+    debouncedQuery: debouncedQuery,
+    handleUnsplashImageSelect: handleUnsplashImageSelect,
+    hasMore: hasNextPage,
+    images: results,
+    key: debouncedQuery,
+    loadMore: fetchNextPage,
+    tab: TABS[2].key
+  });
+};
+
+var ImageLibrary = function ImageLibrary(_ref) {
+  var setSelectedImage = _ref.setSelectedImage,
+    tab = _ref.tab,
+    setIsUploading = _ref.setIsUploading,
+    setActiveTab = _ref.setActiveTab;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var debouncedQuery = useDebounce(query, 400);
+  var inputPlaceHolder = equals(tab, TABS[2].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
+  useEffect(function () {
+    setQuery("");
+  }, [tab]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full px-6 py-4 grow flex flex-col",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "mb-4 shrink-0",
+      children: /*#__PURE__*/jsx(Input, {
+        autoFocus: true,
+        "data-testid": "niu-unsplash-image-picker-search-input",
+        name: "text",
+        placeholder: inputPlaceHolder,
+        value: query,
+        onChange: function onChange(_ref2) {
+          var value = _ref2.target.value;
+          return setQuery(value);
+        }
+      })
+    }), tab === TABS[1].key ? /*#__PURE__*/jsx(Images, {
+      debouncedQuery: debouncedQuery,
+      query: query,
+      setSelectedImage: setSelectedImage
+    }) : /*#__PURE__*/jsx(UnsplashLibrary, {
+      debouncedQuery: debouncedQuery,
+      query: query,
+      setActiveTab: setActiveTab,
+      setIsUploading: setIsUploading,
+      setSelectedImage: setSelectedImage
+    })]
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Modal = function Modal(_ref) {
+  var isOpen = _ref.isOpen,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
+    _ref$onUploadComplete = _ref.onUploadComplete,
+    onUploadComplete = _ref$onUploadComplete === void 0 ? noop : _ref$onUploadComplete,
+    _ref$uploadConfig = _ref.uploadConfig,
+    uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
+    _ref$fixedAspectRatio = _ref.fixedAspectRatio,
+    fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio,
+    _ref$defaultImageSize = _ref.defaultImageSize,
+    defaultImageSize = _ref$defaultImageSize === void 0 ? {} : _ref$defaultImageSize;
+  var _useState = useState(TABS[0].key),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedImage = _useState4[0],
+    setSelectedImage = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isUploading = _useState6[0],
+    setIsUploading = _useState6[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useCreateBlob = useCreateBlob(),
+    createBlob = _useCreateBlob.mutate;
+  var uploadConfigWithDefaults = mergeRight(DEFAULT_UPLOAD_CONFIG, uploadConfig);
+  var isCloudFlareImageUploader = globalProps.assetsUploaderService === CLOUD_FLARE;
+  var handleCloseModal = function handleCloseModal() {
+    onClose();
+    setSelectedImage({});
+  };
+  var handleImageEditComplete = function handleImageEditComplete(editedImage) {
+    handleCreateBlob(editedImage, true);
+    handleCloseModal();
+  };
+  var handleUploadComplete = function handleUploadComplete(image) {
+    if (isGif(image)) {
+      handleCreateBlob(image);
+      handleCloseModal();
+      return;
+    }
+    isCloudFlareImageUploader && handleCreateBlob(image);
+    setSelectedImage(image);
+  };
+  var handleCreateBlob = function handleCreateBlob(editedImage) {
+    var isCropped = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (IS_DEVELOPMENT_OR_HEROKU_ENV || isGif(editedImage)) {
+      onUploadComplete({
+        url: editedImage.url,
+        signedId: editedImage.signedId
+      });
+    } else {
+      var imageKitPayload = function imageKitPayload() {
+        return {
+          filename: generateASCIIFileName(editedImage.name),
+          byte_size: editedImage.size,
+          content_type: editedImage.fileType,
+          checksum: editedImage.fileId,
+          metadata: editedImage,
+          service_name: "imagekitio"
+        };
+      };
+      var cloudFlarePayload = function cloudFlarePayload() {
+        return {
+          filename: generateASCIIFileName(editedImage.filename),
+          content_type: editedImage.contentType,
+          byte_size: editedImage.byteSize,
+          checksum: editedImage.checksum,
+          metadata: _objectSpread(_objectSpread({}, editedImage.metadata), {}, {
+            url: constructCloudflareImageURL(editedImage.url),
+            isCropped: isCropped
+          }),
+          service_name: "cloudflare_image"
+        };
+      };
+      var payload = isCloudFlareImageUploader ? cloudFlarePayload() : imageKitPayload();
+      createBlob(payload, {
+        onSuccess: function onSuccess(image) {
+          onUploadComplete({
+            url: image.blobUrl,
+            signedId: image.signedId
+          });
+        },
+        onError: Toastr.error
+      });
+    }
+  };
+  var _useImageUploader = useImageUploader({
+      onUploadComplete: handleUploadComplete,
+      setIsUploading: setIsUploading
+    }),
+    uploadFile = _useImageUploader.uploadFile;
+  var _useUploadDropzone = useUploadDropzone({
+      uploadConfig: uploadConfigWithDefaults,
+      onDrop: uploadFile
+    }),
+    getRootProps = _useUploadDropzone.getRootProps,
+    getInputProps = _useUploadDropzone.getInputProps,
+    isDragActive = _useUploadDropzone.isDragActive;
+  useEffect(function () {
+    setActiveTab(TABS[0].key);
+  }, [isOpen]);
+  var renderContent = function renderContent() {
+    if (activeTab === "upload") {
+      return /*#__PURE__*/jsx("div", {
+        className: "grow px-6 pb-6 pt-4",
+        children: /*#__PURE__*/jsx("div", {
+          className: "h-full w-full overflow-y-auto",
+          children: /*#__PURE__*/jsx(ImageDirectUpload, {
+            uploadConfig: uploadConfigWithDefaults,
+            onDrop: uploadFile
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/jsx(ImageLibrary, {
+      setActiveTab: setActiveTab,
+      setIsUploading: setIsUploading,
+      setSelectedImage: setSelectedImage,
+      tab: activeTab
+    });
+  };
+  return /*#__PURE__*/jsxs(NeetoUIModal, {
+    isOpen: isOpen,
+    className: "niu-modal",
+    size: "large",
+    onClose: handleCloseModal,
+    children: [isUploading && /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    }), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+      className: "neeto-ui-rounded-xl neeto-ui-bg-gray-400 absolute flex h-full w-full flex-col items-center justify-around border-4 border-dashed border-gray-900 opacity-40"
+    }, getRootProps()), {}, {
+      children: /*#__PURE__*/jsx(Typography, {
+        children: t("neetoImageUploader.common.dropHere")
+      })
+    })), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsx(ImageEditor, {
+      defaultImageSize: defaultImageSize,
+      fixedAspectRatio: fixedAspectRatio,
+      handleImageEditComplete: handleImageEditComplete,
+      handleReset: function handleReset() {
+        return setSelectedImage({});
+      },
+      image: selectedImage,
+      signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
+    }) : /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+      className: "flex h-full flex-col"
+    }, getRootProps({
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    })), {}, {
+      children: [/*#__PURE__*/jsx(NeetoUIModal.Header, {
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "h2",
+          children: t("neetoImageUploader.common.imageLibrary")
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex gap-2 px-6",
+        children: /*#__PURE__*/jsx(Tab, {
+          size: "small",
+          children: TABS.map(function (tab) {
+            return /*#__PURE__*/jsx(Tab.Item, {
+              active: activeTab === tab.key,
+              "data-testid": tab.dataTestid,
+              onClick: function onClick() {
+                return setActiveTab(tab.key);
+              },
+              children: tab.label
+            }, tab.key);
+          })
+        })
+      }), renderContent(), equals(activeTab, TABS[2].key) && /*#__PURE__*/jsx(NeetoUIModal.Footer, {
+        className: "flex items-center justify-center gap-2",
+        children: /*#__PURE__*/jsx(Typography, {
+          lineHeight: "none",
+          style: "body2",
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
+            components: {
+              a: /*#__PURE__*/jsx("a", {
+                href: UNSPLASH_URL,
+                rel: "noreferrer",
+                target: "_blank"
+              })
+            }
+          })
+        })
+      })]
+    })), /*#__PURE__*/jsx("input", _objectSpread({}, getInputProps()))]
+  });
+};
+
+export { Modal as M, constructCloudflareImageURL as c };
+//# sourceMappingURL=index-krkZ4CNS.js.map