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

package/dist/index-CBorETxd.js

@@ -0,0 +1,972 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var require$$0 = require('react');
+var neetoCist = require('@bigbinary/neeto-cist');
+var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
+var NeetoUIModal = require('@bigbinary/neetoui/Modal');
+var Tab = require('@bigbinary/neetoui/Tab');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var Typography = require('@bigbinary/neetoui/Typography');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var utils$1 = require('./utils-BTmA9hHb.js');
+var useImageUploader = require('./useImageUploader-KvCoumJZ.js');
+var useUploadDropzone = require('./useUploadDropzone-DMv8VMRF.js');
+var imagekit_esm = require('./imagekit.esm-CisvUNYU.js');
+var useUnsplashApi = require('./useUnsplashApi-CNeNh58q.js');
+var constants = require('./constants-DI8wBtC-.js');
+var classnames = require('classnames');
+var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var Button = require('@bigbinary/neetoui/Button');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var Input = require('@bigbinary/neetoui/Input');
+var Switch = require('@bigbinary/neetoui/Switch');
+var Label = require('@bigbinary/neetoui/Label');
+var jsxRuntime = require('react/jsx-runtime');
+var NoData = require('@bigbinary/neetoui/NoData');
+var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
+var constants$1 = require('@bigbinary/neeto-team-members-frontend/constants');
+var Alert = require('@bigbinary/neetoui/Alert');
+var Dropdown = require('@bigbinary/neetoui/Dropdown');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@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 = reactUtils.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__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col space-y-6 p-4 md:w-2/6",
+    children: [!hideControls && /*#__PURE__*/jsxRuntime.jsx(Switch, {
+      checked: isFullImage,
+      className: "w-full",
+      label: t("neetoImageUploader.labels.selectOriginalImage"),
+      onChange: function onChange() {
+        return setIsFullImage(function (isFullImage) {
+          return !isFullImage;
+        });
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.width")
+      }), /*#__PURE__*/jsxRuntime.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: utils.withEventTargetValue(handleWidthChange)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.height")
+      }), /*#__PURE__*/jsxRuntime.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: utils.withEventTargetValue(handleHeightChange)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+      className: "mt-6 self-start",
+      "data-testid": "neeto-image-uploader-crop-submit-button",
+      label: t("neetoImageUploader.labels.done"),
+      disabled: utils$1.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 = require$$0.useState(neetoCist.isPresent(fixedAspectRatio)),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAspectRatioLocked = _useState2[0],
+    setIsAspectRatioLocked = _useState2[1];
+  var _useState3 = require$$0.useState(constants.DEFAULT_CROP_CONFIG),
+    _useState4 = _slicedToArray(_useState3, 2),
+    crop = _useState4[0],
+    setCrop = _useState4[1];
+  var _useState5 = require$$0.useState(utils$1.getAspectRatio({
+      fixedAspectRatio: fixedAspectRatio,
+      imageSize: defaultImageSize
+    })),
+    _useState6 = _slicedToArray(_useState5, 2),
+    aspectRatio = _useState6[0],
+    setAspectRatio = _useState6[1];
+  var _useState7 = require$$0.useState(utils$1.getPixels(crop.height, imageHeight)),
+    _useState8 = _slicedToArray(_useState7, 2),
+    height = _useState8[0],
+    setHeight = _useState8[1];
+  var _useState9 = require$$0.useState(utils$1.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 = useUnsplashApi.ReactCrop_minExports.makeAspectCrop({
+      unit: "%",
+      width: utils$1.getPercentage(cropWidth, width),
+      height: utils$1.getPercentage(cropHeight, height)
+    }, aspectRatio, width, height);
+    return useUnsplashApi.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 = utils$1.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 = reactUtils.useFuncDebounce(function (width) {
+    var cropWidth = Number(width);
+    var cropHeight = Number(height);
+    if (isAspectRatioLocked) {
+      cropHeight = utils$1.getHeightFromAspectRatio(cropWidth, aspectRatio);
+      if (cropHeight > imageHeight) {
+        cropHeight = imageHeight;
+        cropWidth = utils$1.getWidthFromAspectRatio(cropHeight, aspectRatio);
+      }
+    }
+    handleResize(cropWidth, cropHeight);
+  }, 300);
+  var handleHeighthResize = reactUtils.useFuncDebounce(function (height) {
+    var cropWidth = Number(width);
+    var cropHeight = Number(height);
+    if (isAspectRatioLocked) {
+      cropWidth = utils$1.getWidthFromAspectRatio(cropHeight, aspectRatio);
+      if (cropWidth > imageWidth) {
+        cropWidth = imageWidth;
+        cropHeight = utils$1.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 = utils$1.getPixels(newWidth, imageWidth);
+    var newCrop = buildCropValues({
+      cropWidth: newWidthInPixels,
+      cropHeight: height,
+      aspectRatio: updatedAspectWidth / aspectRatio.height
+    });
+    setCrop(newCrop);
+    setAspectRatio(ramda.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 = utils$1.getPixels(newHeight, imageHeight);
+    var newCrop = buildCropValues({
+      cropWidth: width,
+      cropHeight: newHeightInPixels,
+      aspectRatio: aspectRatio.width / updatedAspectHeight
+    });
+    setCrop(newCrop);
+    setAspectRatio(ramda.mergeRight(aspectRatio, {
+      height: updatedAspectHeight
+    }));
+    setHeight(newHeightInPixels);
+  };
+  var handleCropChange = function handleCropChange(pixelCrop, percentageCrop) {
+    if (!isAspectRatioLocked) {
+      var _aspectRatio = utils$1.getAspectRatio({
+        imageSize: {
+          width: Math.round(pixelCrop.width),
+          height: Math.round(pixelCrop.height)
+        }
+      });
+      setAspectRatio(_aspectRatio);
+    }
+    setHeight(utils$1.getPixels(percentageCrop.height, imageHeight));
+    setWidth(utils$1.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 = utils$1.getAspectRatio({
+      fixedAspectRatio: fixedAspectRatio,
+      imageSize: {
+        width: imageWidth,
+        height: imageHeight
+      }
+    });
+    var aspectRatioFactor = aspectRatio.width / aspectRatio.height;
+    var _getInitialCropSize = utils$1.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(utils$1.getPixels(crop.height, imageHeight));
+    setWidth(utils$1.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 ? neetoCist.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 = require$$0.useRef(null);
+  var wrapperRef = require$$0.useRef(null);
+  var _ref2 = (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 ? _imageRef$current : {},
+    imageWidth = _ref2.naturalWidth,
+    imageHeight = _ref2.naturalHeight;
+  var _useState = require$$0.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFullImage = _useState2[0],
+    setIsFullImage = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useCropImage = useUnsplashApi.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: utils$1.getCropValues({
+        crop: crop,
+        imageRef: imageRef
+      }),
+      signedId: signedId
+    }, {
+      onSuccess: handleImageEditComplete
+    });
+  };
+  var handleSubmit = function handleSubmit() {
+    if (imagekit_esm.IS_DEVELOPMENT_OR_HEROKU_ENV) {
+      processCrop();
+      return;
+    }
+    if (isFullImage) {
+      handleImageEditComplete(image);
+      return;
+    }
+    var newURL = initializers.globalProps.assetsUploaderService === imagekit_esm.CLOUD_FLARE ? utils$1.getCloudFlareCroppedURL({
+      image: image,
+      crop: crop
+    }) : utils$1.getImageKitCroppedURL({
+      crop: crop,
+      imageURL: image.url,
+      imageRef: imageRef
+    });
+    handleImageEditComplete(ramda.mergeRight(image, {
+      url: newURL
+    }));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex h-full flex-col gap-4 px-8 py-12",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+      className: "self-start",
+      "data-testid": "image-editor-back-button",
+      icon: LeftArrow,
+      iconPosition: "left",
+      style: "text",
+      onClick: handleReset
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex h-full w-full flex-col gap-2 overflow-y-scroll md:flex-row md:overflow-y-auto",
+      children: [/*#__PURE__*/jsxRuntime.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": utils$1.isItemsCenter({
+            wrapperRef: wrapperRef,
+            imageRef: imageRef
+          })
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsxs(useUnsplashApi.ReactCrop, {
+          crop: isFullImage ? null : crop,
+          src: image === null || image === void 0 ? void 0 : image.url,
+          style: utils$1.getWrapperRefStyles(wrapperRef, imageRef),
+          aspect: isAspectRatioLocked ? aspectRatio.width / aspectRatio.height : 0,
+          onChange: handleCropChange,
+          onComplete: handleCropChange,
+          children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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: neetoCist.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 ? neetoCist.noop : _ref$loadMore,
+    tab = _ref.tab,
+    images = _ref.images,
+    _ref$setSelectedImage = _ref.setSelectedImage,
+    setSelectedImage = _ref$setSelectedImage === void 0 ? neetoCist.noop : _ref$setSelectedImage,
+    _ref$handleUnsplashIm = _ref.handleUnsplashImageSelect,
+    handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? neetoCist.noop : _ref$handleUnsplashIm;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = require$$0.useState({
+      isOpen: false,
+      imageIds: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    deleteConfirmation = _useState2[0],
+    setDeleteConfirmation = _useState2[1];
+  var isMenuButtonEnabled = initializers.globalProps.assetsUploaderService !== imagekit_esm.CLOUD_FLARE;
+  var _useBulkDestroyAssets = useUnsplashApi.useBulkDestroyAssets(constants.ASSETS_DESTROY_URL),
+    isPending = _useBulkDestroyAssets.isPending,
+    bulkDelete = _useBulkDestroyAssets.mutate;
+  var handleDelete = require$$0.useCallback(function () {
+    bulkDelete(deleteConfirmation.imageIds, {
+      onSuccess: function onSuccess() {
+        return setDeleteConfirmation({
+          isOpen: false,
+          imageIds: []
+        });
+      }
+    });
+  }, [deleteConfirmation.imageIds]);
+  var Loader = /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex justify-center",
+    children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "niu-unsplash-container grow max-w-full overflow-x-hidden overflow-y-scroll",
+    children: [/*#__PURE__*/jsxRuntime.jsx(useUnsplashApi._default, {
+      hasMore: hasMore,
+      loadMore: loadMore,
+      pack: true,
+      position: true,
+      className: "w-full",
+      loader: Loader,
+      sizes: constants.INFINITE_SCROLLER_SIZES,
+      style: constants.INFINITE_SCROLLER_STYLE,
+      useWindow: false,
+      children: images.map(function (image, index) {
+        var _image$urls, _image$user, _image$user2;
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "float-start w-1/2 pb-4 pe-4 md:w-1/4",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "relative w-full",
+            style: {
+              paddingBottom: "".concat(image.height / image.width * 100, "%")
+            },
+            children: /*#__PURE__*/jsxRuntime.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 === constants.TABS[2].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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 === constants.TABS[1].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [utils.hasPermission(constants$1.VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Menu, {
+                    children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchAssets = useUnsplashApi.useFetchAssets({
+      searchTerm: debouncedQuery,
+      per: constants.IMAGES_PER_PAGE,
+      url: constants.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__*/jsxRuntime.jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "body2",
+        children: t("neetoImageUploader.unsplash.errorMessage")
+      })
+    });
+  }
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
+  if (ramda.isEmpty(results)) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
+        title: t("neetoImageUploader.common.noImagesToShow")
+      })
+    });
+  }
+  return /*#__PURE__*/require$$0.createElement(InfiniteScroller, {
+    setSelectedImage: setSelectedImage,
+    hasMore: hasNextPage,
+    images: results,
+    key: debouncedQuery,
+    loadMore: fetchNextPage,
+    tab: constants.TABS[1].key
+  });
+};
+
+var UnsplashLibrary = function UnsplashLibrary(_ref) {
+  var debouncedQuery = _ref.debouncedQuery,
+    setSelectedImage = _ref.setSelectedImage,
+    setIsUploading = _ref.setIsUploading,
+    setActiveTab = _ref.setActiveTab;
+  var _useImageUploader = 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 useUnsplashApi.unsplashApi.getUnsplashImage((_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular, constants.UNSPLASH_DEFAULT_REQUEST_CONFIG);
+          case 4:
+            response = _context.sent;
+            file = new File([response.data], constants.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(constants.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchUnsplashImag = useUnsplashApi.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__*/jsxRuntime.jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "body2",
+        children: t("neetoImageUploader.unsplash.errorMessage")
+      })
+    });
+  }
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
+  if (ramda.isEmpty(results)) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "grow flex justify-center items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
+        title: t("neetoImageUploader.common.noImagesToShow")
+      })
+    });
+  }
+  return /*#__PURE__*/require$$0.createElement(InfiniteScroller, {
+    debouncedQuery: debouncedQuery,
+    handleUnsplashImageSelect: handleUnsplashImageSelect,
+    hasMore: hasNextPage,
+    images: results,
+    key: debouncedQuery,
+    loadMore: fetchNextPage,
+    tab: constants.TABS[2].key
+  });
+};
+
+var ImageLibrary = function ImageLibrary(_ref) {
+  var setSelectedImage = _ref.setSelectedImage,
+    tab = _ref.tab,
+    setIsUploading = _ref.setIsUploading,
+    setActiveTab = _ref.setActiveTab;
+  var _useState = require$$0.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var debouncedQuery = reactUtils.useDebounce(query, 400);
+  var inputPlaceHolder = ramda.equals(tab, constants.TABS[2].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
+  require$$0.useEffect(function () {
+    setQuery("");
+  }, [tab]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "w-full px-6 py-4 grow flex flex-col",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "mb-4 shrink-0",
+      children: /*#__PURE__*/jsxRuntime.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 === constants.TABS[1].key ? /*#__PURE__*/jsxRuntime.jsx(Images, {
+      debouncedQuery: debouncedQuery,
+      query: query,
+      setSelectedImage: setSelectedImage
+    }) : /*#__PURE__*/jsxRuntime.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 ? neetoCist.noop : _ref$onClose,
+    _ref$onUploadComplete = _ref.onUploadComplete,
+    onUploadComplete = _ref$onUploadComplete === void 0 ? neetoCist.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 = require$$0.useState(constants.TABS[0].key),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var _useState3 = require$$0.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedImage = _useState4[0],
+    setSelectedImage = _useState4[1];
+  var _useState5 = require$$0.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isUploading = _useState6[0],
+    setIsUploading = _useState6[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useCreateBlob = useImageUploader.useCreateBlob(),
+    createBlob = _useCreateBlob.mutate;
+  var uploadConfigWithDefaults = ramda.mergeRight(utils$1.DEFAULT_UPLOAD_CONFIG, uploadConfig);
+  var isCloudFlareImageUploader = initializers.globalProps.assetsUploaderService === imagekit_esm.CLOUD_FLARE;
+  var handleCloseModal = function handleCloseModal() {
+    onClose();
+    setSelectedImage({});
+  };
+  var handleImageEditComplete = function handleImageEditComplete(editedImage) {
+    handleCreateBlob(editedImage, true);
+    handleCloseModal();
+  };
+  var handleUploadComplete = function handleUploadComplete(image) {
+    if (useImageUploader.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 (imagekit_esm.IS_DEVELOPMENT_OR_HEROKU_ENV || useImageUploader.isGif(editedImage)) {
+      onUploadComplete({
+        url: editedImage.url,
+        signedId: editedImage.signedId
+      });
+    } else {
+      var imageKitPayload = function imageKitPayload() {
+        return {
+          filename: useImageUploader.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: useImageUploader.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.useImageUploader({
+      onUploadComplete: handleUploadComplete,
+      setIsUploading: setIsUploading
+    }),
+    uploadFile = _useImageUploader.uploadFile;
+  var _useUploadDropzone = useUploadDropzone.useUploadDropzone({
+      uploadConfig: uploadConfigWithDefaults,
+      onDrop: uploadFile
+    }),
+    getRootProps = _useUploadDropzone.getRootProps,
+    getInputProps = _useUploadDropzone.getInputProps,
+    isDragActive = _useUploadDropzone.isDragActive;
+  require$$0.useEffect(function () {
+    setActiveTab(constants.TABS[0].key);
+  }, [isOpen]);
+  var renderContent = function renderContent() {
+    if (activeTab === "upload") {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "grow px-6 pb-6 pt-4",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "h-full w-full overflow-y-auto",
+          children: /*#__PURE__*/jsxRuntime.jsx(utils$1.ImageDirectUpload, {
+            uploadConfig: uploadConfigWithDefaults,
+            onDrop: uploadFile
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(ImageLibrary, {
+      setActiveTab: setActiveTab,
+      setIsUploading: setIsUploading,
+      setSelectedImage: setSelectedImage,
+      tab: activeTab
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(NeetoUIModal, {
+    isOpen: isOpen,
+    className: "niu-modal",
+    size: "large",
+    onClose: handleCloseModal,
+    children: [isUploading && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    }), utils$1.isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Typography, {
+        children: t("neetoImageUploader.common.dropHere")
+      })
+    })), !utils$1.isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+      className: "flex h-full flex-col"
+    }, getRootProps({
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    })), {}, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(NeetoUIModal.Header, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          style: "h2",
+          children: t("neetoImageUploader.common.imageLibrary")
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex gap-2 px-6",
+        children: /*#__PURE__*/jsxRuntime.jsx(Tab, {
+          size: "small",
+          children: constants.TABS.map(function (tab) {
+            return /*#__PURE__*/jsxRuntime.jsx(Tab.Item, {
+              active: activeTab === tab.key,
+              "data-testid": tab.dataTestid,
+              onClick: function onClick() {
+                return setActiveTab(tab.key);
+              },
+              children: tab.label
+            }, tab.key);
+          })
+        })
+      }), renderContent(), ramda.equals(activeTab, constants.TABS[2].key) && /*#__PURE__*/jsxRuntime.jsx(NeetoUIModal.Footer, {
+        className: "flex items-center justify-center gap-2",
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          lineHeight: "none",
+          style: "body2",
+          children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
+            components: {
+              a: /*#__PURE__*/jsxRuntime.jsx("a", {
+                href: constants.UNSPLASH_URL,
+                rel: "noreferrer",
+                target: "_blank"
+              })
+            }
+          })
+        })
+      })]
+    })), /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread({}, getInputProps()))]
+  });
+};
+
+exports.Modal = Modal;
+exports.constructCloudflareImageURL = constructCloudflareImageURL;
+//# sourceMappingURL=index-CBorETxd.js.map