@bigbinary/neeto-image-uploader-frontend 2.3.33 → 2.3.35

package/dist/{index-BH0wqq_n.js → index-oS3UYUfo.js}

@@ -10,7 +10,7 @@ import Toastr from '@bigbinary/neetoui/Toastr';
 import Typography from '@bigbinary/neetoui/Typography';
 import { mergeRight, identity, prop, equals } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
-import { i as isNilOrEmpty, c as DEFAULT_CROP_CONFIG, g as getAspectRatio, d as getPixels, e as getHeightFromAspectRatio, f as getWidthFromAspectRatio, h as getInitialCropSize, j as getPercentage, k as isItemsCenter, l as getWrapperRefStyles, m as getCloudFlareCroppedURL, n as getImageKitCroppedURL, o as getCropValues, p as IMAGES_PER_PAGE, q as INFINITE_SCROLLER_SIZES, r as INFINITE_SCROLLER_STYLE, T as TABS, A as ASSETS_DESTROY_URL, s as ASSETS_FETCH_URL, U as UNSPLASH_DEFAULT_NAME, t as UNSPLASH_DEFAULT_REQUEST_CONFIG, D as DEFAULT_UPLOAD_CONFIG, u as useUploadDropzone, v as UNSPLASH_URL, b as ImageDirectUpload } from './utils-DMz4D2SB.js';
+import { i as isNilOrEmpty, c as DEFAULT_CROP_CONFIG, g as getAspectRatio, d as getPixels, e as getHeightFromAspectRatio, f as getWidthFromAspectRatio, h as getInitialCropSize, j as getPercentage, k as isItemsCenter, l as getWrapperRefStyles, m as getCloudFlareCroppedURL, n as getImageKitCroppedURL, o as getCropValues, p as IMAGES_PER_PAGE, q as INFINITE_SCROLLER_SIZES, r as INFINITE_SCROLLER_STYLE, T as TABS, A as ASSETS_DESTROY_URL, s as ASSETS_FETCH_URL, U as UNSPLASH_DEFAULT_NAME, t as UNSPLASH_DEFAULT_REQUEST_CONFIG, D as DEFAULT_UPLOAD_CONFIG, u as useUploadDropzone, v as UNSPLASH_URL, b as ImageDirectUpload } from './utils-BjNaSuOu.js';
 import { u as useImageUploader, a as useCreateBlob, g as generateASCIIFileName } from './useImageUploader-BhXn2rPO.js';
 import { I as IS_DEVELOPMENT_OR_HEROKU_ENV, C as CLOUD_FLARE } from './index-1joql7CE.js';
 import classnames from 'classnames';
@@ -523,7 +523,7 @@ var Controls = withT(function (_ref) {
       })]
     }), /*#__PURE__*/jsx(Button, {
       className: "mt-6 self-start",
-      "data-cy": "neeto-image-uploader-crop-submit-button",
+      "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
@@ -700,6 +700,14 @@ var useImageControls = function useImageControls(_ref) {
     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,
@@ -711,8 +719,10 @@ var useImageControls = function useImageControls(_ref) {
       cropWidth: cropWidth,
       cropHeight: cropHeight,
       width: imageWidth,
-      height: imageHeight
+      height: imageHeight,
+      aspectRatio: aspectRatioFactor
     });
+    setAspectRatio(aspectRatio);
     setCrop(crop);
     setHeight(getPixels(crop.height, imageHeight));
     setWidth(getPixels(crop.width, imageWidth));
@@ -815,7 +825,7 @@ var ImageEditor = function ImageEditor(_ref) {
     className: "flex h-full flex-col gap-4 px-8 py-12",
     children: [/*#__PURE__*/jsx(Button, {
       className: "self-start",
-      "data-cy": "image-editor-back-button",
+      "data-testid": "image-editor-back-button",
       icon: LeftArrow,
       iconPosition: "left",
       style: "text",
@@ -840,12 +850,12 @@ var ImageEditor = function ImageEditor(_ref) {
           onComplete: handleCropChange,
           children: [/*#__PURE__*/jsx("img", {
             alt: t("neetoImageUploader.common.image"),
-            "data-cy": "image-editor-uploaded-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 right-0 z-10",
+            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]
           })]
@@ -1866,7 +1876,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
     children: /*#__PURE__*/jsx(Spinner, {})
   });
   return /*#__PURE__*/jsxs("div", {
-    className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll",
+    className: "niu-unsplash-container me-2 max-w-full overflow-x-hidden overflow-y-scroll",
     children: [/*#__PURE__*/jsx(_default, {
       hasMore: hasMore,
       loadMore: loadMore,
@@ -1880,7 +1890,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
       children: images.map(function (image, index) {
         var _image$urls, _image$user, _image$user2;
         return /*#__PURE__*/jsx("div", {
-          className: "float-left w-1/2 pb-4 pr-4 md:w-1/4",
+          className: "float-start w-1/2 pb-4 pe-4 md:w-1/4",
           children: /*#__PURE__*/jsx("div", {
             className: "relative w-full",
             style: {
@@ -1888,17 +1898,17 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
             },
             children: /*#__PURE__*/jsxs("div", {
               className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
-              "data-cy": "library-image-card",
+              "data-testid": "library-image-card",
               id: "unsplashImage".concat(image.id),
               children: [tab === TABS[2].key && /*#__PURE__*/jsxs(Fragment, {
                 children: [/*#__PURE__*/jsx("img", {
-                  "data-cy": "niu-unsplash-image-".concat(index),
+                  "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 left-2 m-auto text-xs underline opacity-0 group-hover:opacity-100",
+                  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",
@@ -1908,16 +1918,16 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
                 children: [hasPermission(VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsx(Dropdown, {
                   buttonSize: "small",
                   buttonStyle: "tertiary",
-                  "data-cy": "image-library-image-options-".concat(index),
+                  "data-testid": "image-library-image-options-".concat(index),
                   icon: MenuHorizontal,
                   buttonProps: {
                     className:
                     // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
-                    "absolute right-2 top-2 z-1 rounded-full"
+                    "absolute end-2 top-2 z-1 rounded-full"
                   },
                   children: /*#__PURE__*/jsx(Menu, {
                     children: /*#__PURE__*/jsx(MenuItem.Button, {
-                      "data-cy": "image-library-image-delete",
+                      "data-testid": "image-library-image-delete",
                       onClick: function onClick() {
                         return setDeleteConfirmation({
                           isOpen: true,
@@ -1928,7 +1938,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
                     })
                   })
                 }), /*#__PURE__*/jsx("img", {
-                  "data-cy": "niu-library-image-".concat(index),
+                  "data-testid": "niu-library-image-".concat(index),
                   src: image === null || image === void 0 ? void 0 : image.url,
                   onClick: function onClick() {
                     return setSelectedImage(image);
@@ -2153,7 +2163,7 @@ var ImageLibrary = function ImageLibrary(_ref) {
     children: [/*#__PURE__*/jsx(Input, {
       autoFocus: true,
       className: "mb-4",
-      "data-cy": "niu-unsplash-image-picker-search-input",
+      "data-testid": "niu-unsplash-image-picker-search-input",
       name: "text",
       placeholder: inputPlaceHolder,
       value: query,
@@ -2339,7 +2349,7 @@ var Modal = function Modal(_ref) {
           children: TABS.map(function (tab) {
             return /*#__PURE__*/jsx(Tab.Item, {
               active: activeTab === tab.key,
-              "data-cy": tab.dataCy,
+              "data-testid": tab.dataTestid,
               onClick: function onClick() {
                 return setActiveTab(tab.key);
               },
@@ -2368,4 +2378,4 @@ var Modal = function Modal(_ref) {
 };
 
 export { Modal as M, constructCloudflareImageURL as c };
-//# sourceMappingURL=index-BH0wqq_n.js.map
+//# sourceMappingURL=index-oS3UYUfo.js.map