@dreamcommerce/aurora 2.18.0-1 → 2.18.0-3

package/build/esm/packages/aurora/src/components/dropdown/index.js

@@ -1,88 +1,28 @@
-import React, { useRef } from 'react';
-import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { DropdownContext } from './context/index.js';
-import cssClasses from '../../css/dropdown/main.module.less.js';
-import Content from './components/content.js';
-import CustomLabel from './components/custom_label.js';
-import Header from './components/header.js';
-import Item from './components/item.js';
-import ItemWithHover from './components/item_with_hover.js';
-import Label from './components/label.js';
-import Link from './components/link.js';
-import List from './components/list.js';
-import Option from './components/option.js';
-import { useToggle } from './hooks/use_toggle.js';
-import OptionMultiple from './components/option_multiple.js';
-import Search from './components/search.js';
-import Select from './components/select.js';
+import React, { useMemo } from 'react';
+import { DropdownsManagerContext } from './context/dropdowns_manager.js';
+import useDropdownsManager from './hooks/use_dropdowns_manager.js';
 
-/**
- * Dropdown composition component. Provides several Dropdown dependant components which can be composed to create
- * selects, multiselects or dropdowns.
- *
- * @component
- * @example
- * return (
- *  <Dropdown>
- *      <Dropdown.Label label="Wybierz link" />
- *      <Dropdown.Content>
- *          <Dropdown.List>
- *              <Dropdown.Link text="shoper.pl" href="https://shoper.pl" />
- *              <Dropdown.Link text="forum.shoper.pl" href="https://forum.shoper.pl" />
- *              <Dropdown.Link text="shoper.pl/help" href="https://shoper.pl/help" />
- *          </Dropdown.List>
- *      </Dropdown.Content>
- *  <Dropdown>
- * )
- */
+var DropdownsManager = function DropdownsManager(_ref) {
+  var children = _ref.children;
 
-var Dropdown = function Dropdown(_ref) {
-  var _ref$defaultIsOpen = _ref.defaultIsOpen,
-      defaultIsOpen = _ref$defaultIsOpen === void 0 ? false : _ref$defaultIsOpen,
-      onToggle = _ref.onToggle,
-      children = _ref.children;
-  var wrapperRef = useRef(null);
+  var _useDropdownsManager = useDropdownsManager(),
+      addDropdown = _useDropdownsManager.addDropdown,
+      updateDropdown = _useDropdownsManager.updateDropdown,
+      getDropdown = _useDropdownsManager.getDropdown,
+      closeAllDropdowns = _useDropdownsManager.closeAllDropdowns;
 
-  var _useToggle = useToggle(defaultIsOpen, onToggle),
-      _useToggle2 = _slicedToArray(_useToggle, 4),
-      isOpen = _useToggle2[0],
-      toggleDropdown = _useToggle2[1],
-      openDropdown = _useToggle2[2],
-      closeDropdown = _useToggle2[3];
-  /**
-   * context values, they may be used with useContext in any component which is part of Dropdown composition
-   */
-
-
-  var value = React.useMemo(function () {
+  var value = useMemo(function () {
     return {
-      wrapperRef: wrapperRef,
-      isOpen: isOpen,
-      toggleDropdown: toggleDropdown,
-      openDropdown: openDropdown,
-      closeDropdown: closeDropdown
+      addDropdown: addDropdown,
+      updateDropdown: updateDropdown,
+      getDropdown: getDropdown,
+      closeAllDropdowns: closeAllDropdowns
     };
-  }, [isOpen, toggleDropdown, openDropdown, closeDropdown]);
-  return /*#__PURE__*/React.createElement(DropdownContext.Provider, {
+  }, [addDropdown, updateDropdown, getDropdown, closeAllDropdowns]);
+  return /*#__PURE__*/React.createElement(DropdownsManagerContext.Provider, {
     value: value
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: wrapperRef,
-    className: cssClasses.dropdown
-  }, children));
+  }, children);
 };
 
-Dropdown.Select = Select;
-Dropdown.Content = Content;
-Dropdown.ItemWithHover = ItemWithHover;
-Dropdown.Search = Search;
-Dropdown.List = List;
-Dropdown.Header = Header;
-Dropdown.Option = Option;
-Dropdown.OptionMultiple = OptionMultiple;
-Dropdown.Link = Link;
-Dropdown.Label = Label;
-Dropdown.CustomLabel = CustomLabel;
-Dropdown.Item = Item;
-
-export default Dropdown;
+export default DropdownsManager;
 //# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/types.d.ts

@@ -39,6 +39,10 @@ export interface IDropdownCustomLabelProps {
     children: ReactNode;
     disabled?: boolean;
 }
+export interface IDropdown {
+    id: string;
+    isOpen: boolean;
+}
 export interface IDropdownContentProps {
     search?: ReactNode;
     children?: ReactNode;
@@ -50,7 +54,10 @@ export interface IDropdownContentProps {
     horizontalPosition?: 'left' | 'right';
     verticalPosition?: 'top' | 'bottom';
     cssClass?: string;
+    shouldCloseOnClickOutside?: boolean;
     onClickOutside?: () => void;
+    shouldCloseOnScroll?: boolean;
+    shouldCloseOthersOnOpen?: boolean;
 }
 export interface IDropdownItemWithHover {
     children?: ReactNode;

package/build/esm/packages/aurora/src/components/dropdown/utilities.js

@@ -3,6 +3,7 @@ import cssClasses$1 from '../../css/modal/main.module.less.js';
 import { cssDropdownContent } from './css_classes.js';
 import cssClasses from '../../css/dropdown/main.module.less.js';
 import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
+import find_1 from '../../../../../external/lodash/find.js';
 
 /**
  * checks if the given option is selected within array of selectedValues array
@@ -12,7 +13,9 @@ import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
  */
 
 var isSelected = function isSelected(option, selectedValues) {
-  return selectedValues.indexOf(option) >= 0;
+  return find_1(selectedValues, {
+    value: option.value
+  }) !== undefined;
 };
 /**
  * Called on Dropdown.Option(Dropdown.MultiOption) click. Marks given option as selected, option value is added do

package/build/esm/packages/aurora/src/components/dropdown/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,mBAAmB,wCAA4C;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/file_picker/types.d.ts

@@ -40,6 +40,7 @@ export interface IUseFilePicker {
     onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
     onFileDelete: () => void;
     onPreviewError: () => void;
+    changeFile: (files: FileList) => void;
     file: TFilePickerFile | undefined;
     errors: string[];
     isPreview: boolean;

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js

@@ -93,8 +93,11 @@ var useFilePicker = function useFilePicker(_ref) {
     return isValid;
   };
 
-  var onFileChange = function onFileChange(_ref2) {
-    var files = _ref2.target.files;
+  var onFileChange = function onFileChange(event) {
+    changeFile(event.target.files);
+  };
+
+  var changeFile = function changeFile(files) {
     setErrors([]);
     updateFile(files);
   };
@@ -163,6 +166,7 @@ var useFilePicker = function useFilePicker(_ref) {
     onDragLeave: onDragLeave,
     onFileDelete: onFileDelete,
     onPreviewError: onPreviewError,
+    changeFile: changeFile,
     file: file,
     errors: errors,
     isPreview: isPreview,

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/hint/index.js

@@ -5,7 +5,7 @@ import cssClasses from '../../css/hint/main.module.less.js';
 import { classNames } from '../../utilities/styles/classNames.js';
 import IconHint from '../../assets/icon_hint.js';
 import { useToggle } from '../dropdown/hooks/use_toggle.js';
-import Dropdown from '../dropdown/index.js';
+import Dropdown from '../dropdown/components/dropdown.js';
 
 var Hint = function Hint(_ref) {
   var hint = _ref.hint,

package/build/esm/packages/aurora/src/components/image_picker/css_classes.d.ts

@@ -3,6 +3,8 @@ declare const _default: {
     imagePickerWrapper: string;
     imagePickerWrapperError: string;
     imagePickerWrapperHasFile: string;
+    imagePickerWrapperTopButtons: string;
+    imagePickerEditButton: string;
     imagePickerLabel: string;
     imagePickerDescription: string;
     imagePickerImagePreview: string;

package/build/esm/packages/aurora/src/components/image_picker/css_classes.js

@@ -4,6 +4,8 @@ var CSS_CLASSES = {
   imagePickerWrapper: "".concat(imagePicker, "__wrapper"),
   imagePickerWrapperError: "".concat(imagePicker, "__wrapper-error"),
   imagePickerWrapperHasFile: "".concat(imagePicker, "__wrapper-has-file"),
+  imagePickerWrapperTopButtons: "".concat(imagePicker, "__wrapper-top-buttons"),
+  imagePickerEditButton: "".concat(imagePicker, "__edit-button"),
   imagePickerLabel: "".concat(imagePicker, "__label"),
   imagePickerDescription: "".concat(imagePicker, "__description"),
   imagePickerImagePreview: "".concat(imagePicker, "__image-preview"),

package/build/esm/packages/aurora/src/components/image_picker/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/index.js

@@ -24,7 +24,9 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
       name = _ref.name,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      onImageSizeUpdated = _ref.onImageSizeUpdated;
+      onImageSizeUpdated = _ref.onImageSizeUpdated,
+      topButtons = _ref.topButtons,
+      editedImageResult = _ref.editedImageResult;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -46,6 +48,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
       onDragLeave = _useFilePicker.onDragLeave,
       onFileDelete = _useFilePicker.onFileDelete,
       onPreviewError = _useFilePicker.onPreviewError,
+      changeFile = _useFilePicker.changeFile,
       file = _useFilePicker.file,
       errors = _useFilePicker.errors,
       isPreview = _useFilePicker.isPreview,
@@ -65,6 +68,18 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   useEffect(function () {
     initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
   }, [initialFile]);
+  useEffect(function () {
+    if (!editedImageResult) return;
+    var fileList = createFileList(editedImageResult);
+    changeFile(fileList);
+    updateFile(fileList);
+  }, [editedImageResult]);
+
+  var createFileList = function createFileList(file) {
+    var fileArray = [];
+    fileArray.push(file);
+    return fileArray;
+  };
 
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
     createImageFromUrl(fileUrl).then(function (image) {
@@ -144,7 +159,9 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     className: imagePickerClassName
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(imagePickerWrapperClassName, " ").concat(dragOverStyles.imagePickerWrapper)
-  }, file && (isPreview ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagePreview, {
+  }, file && (isPreview ? /*#__PURE__*/React.createElement(React.Fragment, null, topButtons && /*#__PURE__*/React.createElement("div", {
+    className: styles[CSS_CLASSES.imagePickerWrapperTopButtons]
+  }, topButtons), /*#__PURE__*/React.createElement(ImagePreview, {
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onError: onPreviewError
@@ -174,7 +191,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
 }, function (prev, curr) {
   var _prev$initialFile, _curr$initialFile, _prev$initialFile2, _curr$initialFile2;
 
-  return ((_prev$initialFile = prev.initialFile) === null || _prev$initialFile === void 0 ? void 0 : _prev$initialFile.fileUrl) === ((_curr$initialFile = curr.initialFile) === null || _curr$initialFile === void 0 ? void 0 : _curr$initialFile.fileUrl) && ((_prev$initialFile2 = prev.initialFile) === null || _prev$initialFile2 === void 0 ? void 0 : _prev$initialFile2.fileName) === ((_curr$initialFile2 = curr.initialFile) === null || _curr$initialFile2 === void 0 ? void 0 : _curr$initialFile2.fileName) && prev.errors === curr.errors;
+  return ((_prev$initialFile = prev.initialFile) === null || _prev$initialFile === void 0 ? void 0 : _prev$initialFile.fileUrl) === ((_curr$initialFile = curr.initialFile) === null || _curr$initialFile === void 0 ? void 0 : _curr$initialFile.fileUrl) && ((_prev$initialFile2 = prev.initialFile) === null || _prev$initialFile2 === void 0 ? void 0 : _prev$initialFile2.fileName) === ((_curr$initialFile2 = curr.initialFile) === null || _curr$initialFile2 === void 0 ? void 0 : _curr$initialFile2.fileName) && prev.errors === curr.errors && prev.editedImageResult === curr.editedImageResult;
 });
 
 export default ImagePicker;

package/build/esm/packages/aurora/src/components/image_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/types.d.ts

@@ -1,19 +1,13 @@
 import { IFilePicker, TFilesExtension } from "../file_picker/types";
-import React from 'react';
+import React, { ReactNode } from 'react';
 export declare type TImagePickerFile = {
     fileUrl: string;
     fileName: string;
 };
 export interface IImagePicker extends IFilePicker {
     onImageSizeUpdated?: (imageSize?: TImageSize) => void;
-}
-export interface ISelectedImagePreview {
-    file: TImagePickerFile;
-    isPreview: boolean;
-    fileFormatIsCorrect?: boolean;
-    imageSize?: TImageSize;
-    onPreviewError: () => void;
-    onFileDelete: () => void;
+    topButtons?: ReactNode;
+    editedImageResult?: File;
 }
 export interface IImagePickerInput {
     id: string;

package/build/esm/packages/aurora/src/components/image_picker/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/types.ts"],"names":[],"mappings":"AAAA,OAA6C,qCAAqC,CAAC;AAEnF,OAAkB,OAAO,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/types.ts"],"names":[],"mappings":"AAAA,OAA6C,qCAAqC,CAAC;AACnF,OAAiC,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/modal_new/components/modal/modal.js

@@ -16,6 +16,8 @@ var ModalNew = function ModalNew(_ref) {
       animationDirection = _ref$animationDirecti === void 0 ? MODAL_ANIMATION_DIRECTIONS.top : _ref$animationDirecti,
       header = _ref.header,
       footer = _ref.footer,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
       children = _ref.children;
 
   var _useState = useState(false),
@@ -82,7 +84,11 @@ var ModalNew = function ModalNew(_ref) {
   if (!$modalsManagerContainer) return null;
   return renderModal ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
     id: name,
-    className: modalClassNames
+    className: "".concat(modalClassNames, " js__modal"),
+    style: {
+      minWidth: minWidth,
+      maxHeight: maxWidth
+    }
   }, header && /*#__PURE__*/React.createElement(ModalHeader, {
     content: header.content,
     closeAction: handleCloseModal

package/build/esm/packages/aurora/src/components/modal_new/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal_new/components/modals_wrapper.js

@@ -46,7 +46,7 @@ var ModalsWrapper = function ModalsWrapper(_ref) {
   }, showWrapper && /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssModalsManagerWrapper])
   }, /*#__PURE__*/React.createElement("div", {
-    className: modalsWrapperBackdropClassNames
+    className: "".concat(modalsWrapperBackdropClassNames, " js__modal-mask")
   }), /*#__PURE__*/React.createElement("div", {
     id: MODALS_CONTENT_ID,
     className: "".concat(styles[cssModalsManagerWrapperContent])

package/build/esm/packages/aurora/src/components/modal_new/types.d.ts

@@ -22,6 +22,8 @@ export interface IModalNewProps {
     animationDirection?: typeof MODAL_ANIMATION_DIRECTIONS[keyof typeof MODAL_ANIMATION_DIRECTIONS];
     header?: IModalHeaderProps;
     footer?: IModalFooterProps;
+    minWidth?: string;
+    maxWidth?: string;
     children: ReactNode;
 }
 export interface IModalHeaderProps {

package/build/esm/packages/aurora/src/components/tooltip/index.js

@@ -3,7 +3,7 @@ import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollup
 import { DropdownContext } from '../dropdown/context/index.js';
 import cssClasses from '../../css/tooltip/main.module.less.js';
 import { useToggle } from '../dropdown/hooks/use_toggle.js';
-import Dropdown from '../dropdown/index.js';
+import Dropdown from '../dropdown/components/dropdown.js';
 import { cssTooltip, cssTooltipContainer } from './css_classes.js';
 import { TOOLTIP_TIMEOUT_IN_MS } from './tooltip_constants.js';
 

package/build/esm/packages/aurora/src/components/xhr_image_picker/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { IXhrImagePickerProps } from "./types";
+import React from 'react';
 declare const XhrImagePicker: React.FC<IXhrImagePickerProps>;
 export default XhrImagePicker;

package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js

@@ -1,7 +1,13 @@
-import React, { useRef, useEffect } from 'react';
-import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useRef, useState, useEffect } from 'react';
+import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { FILES_EXTENSIONS } from '../file_picker/constants.js';
+import CSS_CLASSES from '../image_picker/css_classes.js';
+import IconImage from '../../assets/icon_image.js';
+import styles from '../../css/image_picker/main.module.less.js';
 import ImagePicker from '../image_picker/index.js';
+import { useModalsContext } from '../modal_new/hooks/use_modals_context.js';
+import { ModalNew } from '../modal_new/components/modal/modal.js';
 import { REQUEST_TYPES } from '../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js';
 import { useHttpApi } from '../../hooks/use_http_api.js';
 
@@ -16,11 +22,43 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       onChange = _ref.onChange,
       onImageSizeUpdated = _ref.onImageSizeUpdated,
       _ref$allowedExtension = _ref.allowedExtensions,
-      allowedExtensions = _ref$allowedExtension === void 0 ? [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG, FILES_EXTENSIONS.JPEG] : _ref$allowedExtension;
+      allowedExtensions = _ref$allowedExtension === void 0 ? [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG, FILES_EXTENSIONS.JPEG] : _ref$allowedExtension,
+      ImageEditor = _ref.ImageEditor;
+
+  var _useTranslation = useTranslation(),
+      _useTranslation2 = _slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
+
   var httpApi = useHttpApi();
   var pendingRequestRef = React.useRef();
   var initialImageFile = useRef();
 
+  var _useModalsContext = useModalsContext(),
+      showModal = _useModalsContext.showModal,
+      hideModal = _useModalsContext.hideModal;
+
+  var modalId = "image-picker-editor-".concat(id);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      initialImage = _useState2[0],
+      setInitialImage = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      image = _useState4[0],
+      setImage = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      imageEditorSrc = _useState6[0],
+      setImageEditorSrc = _useState6[1];
+
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      imageEditorResult = _useState8[0],
+      setImageEditorResult = _useState8[1];
+
   var handleControlChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
       var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject;
@@ -29,19 +67,20 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
+            fileList && setImage(fileList[0]);
             onChange === null || onChange === void 0 || onChange({
               fileList: fileList,
               fileAsDataUrl: fileAsDataUrl
             });
 
             if (!(!fileList || !fileList.length)) {
-              _context.next = 4;
+              _context.next = 5;
               break;
             }
 
             return _context.abrupt("return");
 
-          case 4:
+          case 5:
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
@@ -53,10 +92,10 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
               data: fileList[0]
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.next = 9;
+            _context.next = 10;
             return response;
 
-          case 9:
+          case 10:
             responseObject = _context.sent;
             onUploaded === null || onUploaded === void 0 || onUploaded({
               fileList: fileList,
@@ -64,7 +103,7 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
               imageId: responseObject.data.imageId
             });
 
-          case 11:
+          case 12:
           case "end":
             return _context.stop();
         }
@@ -78,13 +117,56 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
 
   useEffect(function () {
     initialImageFile.current = initialFile;
+
+    var setFileFromUrl = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(fileData) {
+        var response, data, file;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return fetch(fileData.fileUrl);
+
+            case 2:
+              response = _context2.sent;
+              _context2.next = 5;
+              return response.blob();
+
+            case 5:
+              data = _context2.sent;
+              file = new File([data], fileData.fileName);
+              setInitialImage(file);
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+
+      return function setFileFromUrl(_x2) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    if (!initialImageFile.current) return;
+    setFileFromUrl(initialImageFile.current);
     return function () {
       var _pendingRequestRef$cu;
 
       return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(ImagePicker, {
+  useEffect(function () {
+    var src = image !== null && image !== void 0 ? image : initialImage;
+    setImageEditorSrc(src !== null && src !== void 0 ? src : '');
+  }, [image, initialImage]);
+
+  var renderImageEditor = function renderImageEditor(defaultProps) {
+    return ImageEditor ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageEditor, _objectSpread2({}, defaultProps))) : null;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagePicker, {
     id: id,
     name: name,
     onChange: handleControlChange,
@@ -92,8 +174,26 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
     errors: errors,
     allowedExtensions: allowedExtensions,
     initialFile: initialImageFile.current,
-    onImageSizeUpdated: onImageSizeUpdated
-  });
+    onImageSizeUpdated: onImageSizeUpdated,
+    topButtons: ImageEditor && /*#__PURE__*/React.createElement("button", {
+      className: styles[CSS_CLASSES.imagePickerEditButton],
+      onClick: function onClick() {
+        return showModal(modalId);
+      },
+      type: "button"
+    }, /*#__PURE__*/React.createElement(IconImage, null), t('Edit')),
+    editedImageResult: imageEditorResult
+  }), ImageEditor && /*#__PURE__*/React.createElement(ModalNew, {
+    name: modalId,
+    header: t('Edit image'),
+    minWidth: "80vw"
+  }, renderImageEditor({
+    src: imageEditorSrc,
+    onEditionDone: function onEditionDone(result) {
+      hideModal(modalId);
+      setImageEditorResult(result);
+    }
+  })));
 };
 
 export default XhrImagePicker;

package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/xhr_image_picker/types.d.ts

@@ -1,8 +1,14 @@
+/// <reference types="react" />
 import { IImagePicker } from "../image_picker/types";
-export interface IXhrImagePickerProps extends IImagePicker {
+export interface IXhrImagePickerProps extends Omit<IImagePicker, 'topButtons'> {
     url: string;
     onUploaded?: (data: TUploadedImageData) => void;
     onUploadError?: Function;
+    ImageEditor?: React.FunctionComponent;
+}
+export interface IImageEditorProps {
+    src?: File | string;
+    onEditionDone?: (result: File | undefined) => void;
 }
 export declare type TUploadedImageData = {
     fileList: FileList;