@dreamcommerce/aurora 2.17.21 → 2.17.22-10

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDropdownsManagerContextProps } from './types';
+export declare const DropdownsManagerContext: import("react").Context<IDropdownsManagerContextProps>;

package/build/esm/packages/aurora/src/components/dropdown/context/dropdowns_manager.js

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+var DropdownsManagerContext = /*#__PURE__*/createContext({
+  addDropdown: function addDropdown() {},
+  updateDropdown: function updateDropdown() {},
+  getDropdown: function getDropdown() {
+    return undefined;
+  },
+  closeAllDropdowns: function closeAllDropdowns() {}
+});
+
+export { DropdownsManagerContext };
+//# sourceMappingURL=dropdowns_manager.js.map

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

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

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IDropdown } from '../types';
 export interface IDropdownContext {
     wrapperRef?: React.RefObject<HTMLDivElement>;
     isOpen?: boolean;
@@ -6,3 +7,9 @@ export interface IDropdownContext {
     openDropdown?: () => void;
     closeDropdown?: () => void;
 }
+export interface IDropdownsManagerContextProps {
+    addDropdown: (dropdown: IDropdown) => void;
+    updateDropdown: (dropdown: IDropdown) => void;
+    getDropdown: (dropdownId: string) => IDropdown | undefined;
+    closeAllDropdowns: () => void;
+}

package/build/esm/packages/aurora/src/components/dropdown/context/types.js

@@ -1,2 +1,2 @@
-export {};
+import '../types';
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../src/components/dropdown/context/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../src/components/dropdown/context/types.ts"],"names":[],"mappings":"AAAA,OAA0B,UAAU,CAAC"}

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

@@ -7,7 +7,7 @@ import { handleSearchKeyUp, isSelected, handleItemClick } from '../../utilities.
 import { useValues } from '../../hooks/use_values.js';
 import { useToggle } from '../../hooks/use_toggle.js';
 import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
-import Dropdown from '../../index.js';
+import Dropdown from '../../components/dropdown.js';
 
 /**
  * MultiSelect component. Build with Dropdown composed components.

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

@@ -7,7 +7,7 @@ import { handleSearchKeyUp, isSelected, handleItemClick } from '../../utilities.
 import { useValue } from '../../hooks/use_value.js';
 import { useToggle } from '../../hooks/use_toggle.js';
 import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
-import Dropdown from '../../index.js';
+import Dropdown from '../../components/dropdown.js';
 
 /**
  * Select component. Build with Dropdown composed components.

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

@@ -0,0 +1,8 @@
+import { IDropdown } from '../types';
+declare const useDropdownsManager: () => {
+    addDropdown: (dropdown: IDropdown) => void;
+    updateDropdown: (dropdown: IDropdown) => void;
+    getDropdown: (dropdownId: string) => IDropdown | undefined;
+    closeAllDropdowns: () => void;
+};
+export default useDropdownsManager;

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_dropdowns_manager.js

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var useDropdownsManager = function useDropdownsManager() {
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      dropdownsStack = _useState2[0],
+      setDropdownsStack = _useState2[1];
+
+  var addDropdown = function addDropdown(dropdown) {
+    setDropdownsStack(function (stack) {
+      var dropdownIdAlreadyExist = stack.some(function (stackModal) {
+        return stackModal.id === dropdown.id;
+      });
+
+      if (dropdownIdAlreadyExist) {
+        return _toConsumableArray(stack);
+      } else {
+        return [].concat(_toConsumableArray(stack), [dropdown]);
+      }
+    });
+  };
+
+  var updateDropdown = function updateDropdown(dropdown) {
+    setDropdownsStack(function (previousStack) {
+      var updatedStack = previousStack.map(function (stackDropdown) {
+        return stackDropdown.id === dropdown.id ? _objectSpread2({}, dropdown) : stackDropdown;
+      });
+      return updatedStack;
+    });
+  };
+
+  var closeAllDropdowns = function closeAllDropdowns() {
+    setDropdownsStack(function (previousStack) {
+      var updatedStack = previousStack.map(function (stackDropdown) {
+        stackDropdown.isOpen = false;
+        return stackDropdown;
+      });
+      return updatedStack;
+    });
+  };
+
+  var getDropdown = function getDropdown(dropdownId) {
+    return dropdownsStack.find(function (stackModal) {
+      return stackModal.id === dropdownId;
+    });
+  };
+
+  return {
+    addDropdown: addDropdown,
+    updateDropdown: updateDropdown,
+    getDropdown: getDropdown,
+    closeAllDropdowns: closeAllDropdowns
+  };
+};
+
+export default useDropdownsManager;
+//# sourceMappingURL=use_dropdowns_manager.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,2 @@
+import { IDropdownsManagerContextProps } from '../context/types';
+export declare function useDropdownsManagerContext(): IDropdownsManagerContextProps;

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_dropdowns_manager_context.js

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { DropdownsManagerContext } from '../context/dropdowns_manager.js';
+
+function useDropdownsManagerContext() {
+  var context = useContext(DropdownsManagerContext);
+
+  if (Object.keys(context).length === 0 && context.constructor === Object) {
+    throw new Error("Dropdown cannot be rendered outside the DropdownsManagerContext");
+  }
+
+  return context;
+}
+
+export { useDropdownsManagerContext };
+//# sourceMappingURL=use_dropdowns_manager_context.js.map

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

@@ -0,0 +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;"}

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

@@ -2,6 +2,7 @@
  * Hook used for toggling dropdown
  * @param defaultIsOpen should dropdown be opened at render
  * @param onToggleCb callback onToggle
+ * @param closeAllDropdowns close all already opened dropdowns
  * @returns {Array} tuple - open state and and method to change open state
  */
-export declare function useToggle(defaultIsOpen?: boolean, onToggleCb?: (isOpen: boolean) => void): [boolean, () => void, () => void, () => void];
+export declare function useToggle(defaultIsOpen?: boolean, onToggleCb?: (isOpen: boolean) => void, closeAllDropdowns?: () => void): [boolean, () => void, () => void, () => void];

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_toggle.js

@@ -6,12 +6,14 @@ import { useEffectAfterMount } from '../../../hooks/use_effect_after_mount.js';
  * Hook used for toggling dropdown
  * @param defaultIsOpen should dropdown be opened at render
  * @param onToggleCb callback onToggle
+ * @param closeAllDropdowns close all already opened dropdowns
  * @returns {Array} tuple - open state and and method to change open state
  */
 
 function useToggle() {
   var defaultIsOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var onToggleCb = arguments.length > 1 ? arguments[1] : undefined;
+  var closeAllDropdowns = arguments.length > 2 ? arguments[2] : undefined;
 
   var _useState = useState(defaultIsOpen),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19,7 +21,8 @@ function useToggle() {
       setIsOpen = _useState2[1];
 
   var onToggle = useCallback(function () {
-    return setIsOpen(function (oldIsOpen) {
+    closeAllDropdowns && closeAllDropdowns();
+    setIsOpen(function (oldIsOpen) {
       return !oldIsOpen;
     });
   }, []);

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_toggle.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;"}
+{"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;"}

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

@@ -1,23 +1,6 @@
-import { IDropdownComposition, IDropdownProps } from './types';
-import React from 'react';
-/**
- * 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>
- * )
- */
-declare const Dropdown: React.FC<IDropdownProps> & IDropdownComposition;
-export default Dropdown;
+import React, { ReactNode } from 'react';
+interface IDropdownsManagerContextProps {
+    children: ReactNode;
+}
+declare const DropdownsManager: React.FC<IDropdownsManagerContextProps>;
+export default DropdownsManager;

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;
@@ -53,6 +57,7 @@ export interface IDropdownContentProps {
     shouldCloseOnClickOutside?: boolean;
     onClickOutside?: () => void;
     shouldCloseOnScroll?: boolean;
+    shouldCloseOthersOnOpen?: boolean;
 }
 export interface IDropdownItemWithHover {
     children?: ReactNode;

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/components/image_input.js

@@ -5,6 +5,7 @@ import withTranslation from '../../../utilities/translation/with_translation.js'
 import IconUpload from '../../../assets/icon_upload.js';
 import CSS_CLASSES from '../css_classes.js';
 import styles from '../../../css/image_picker/main.module.less.js';
+import WithLoader from '../../with_loader/index.js';
 
 var ImageInput = function ImageInput(_ref) {
   var id = _ref.id,
@@ -12,13 +13,18 @@ var ImageInput = function ImageInput(_ref) {
       onDragOver = _ref.onDragOver,
       onDragLeave = _ref.onDragLeave,
       allowedExtensions = _ref.allowedExtensions,
-      isDragOver = _ref.isDragOver;
+      isDragOver = _ref.isDragOver,
+      isLoaderVisible = _ref.isLoaderVisible;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
       t = _useTranslation2[0];
 
-  return /*#__PURE__*/React.createElement("label", {
+  console.log('image input isLoaderVisible', isLoaderVisible);
+  return /*#__PURE__*/React.createElement(WithLoader, {
+    isLoading: isLoaderVisible,
+    textOnLoading: t('File transfer...')
+  }, /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     onDrop: onDropFile,
     onDragOver: onDragOver,
@@ -32,7 +38,7 @@ var ImageInput = function ImageInput(_ref) {
     className: styles[CSS_CLASSES.imagePickerSupportedFormats]
   }, "(", t('supported format'), ": ", allowedExtensions.map(function (extension) {
     return "*.".concat(extension);
-  }).join(', '), ")")));
+  }).join(', '), ")"))));
 };
 
 var ImageInput$1 = withTranslation(ImageInput);

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -26,7 +26,8 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
       className = _ref$className === void 0 ? '' : _ref$className,
       onImageSizeUpdated = _ref.onImageSizeUpdated,
       topButtons = _ref.topButtons,
-      editedImageResult = _ref.editedImageResult;
+      editedImageResult = _ref.editedImageResult,
+      isLoaderVisible = _ref.isLoaderVisible;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -176,7 +177,8 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     isDragOver: isDragOver,
     allowedExtensions: allowedExtensions,
     id: id,
-    onDropFile: onDropFile
+    onDropFile: onDropFile,
+    isLoaderVisible: isLoaderVisible
   }), /*#__PURE__*/React.createElement("input", {
     onChange: handleOnFileChange,
     id: id,

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;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;AACA;AACA;"}

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

@@ -8,6 +8,7 @@ export interface IImagePicker extends IFilePicker {
     onImageSizeUpdated?: (imageSize?: TImageSize) => void;
     topButtons?: ReactNode;
     editedImageResult?: File;
+    isLoaderVisible?: boolean;
 }
 export interface ISelectedImagePreview {
     file: TImagePickerFile;
@@ -24,6 +25,7 @@ export interface IImagePickerInput {
     onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
     allowedExtensions: TFilesExtension[];
     isDragOver: boolean;
+    isLoaderVisible?: boolean;
 }
 export declare type TImageSize = {
     width: number;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
+import cssClasses from '../../css/loader/main.module.less.js';
 import { cssLoader } from './css_classes.js';
 import { LOADER_SIZE_CSS_CLASS_MAP, LOADER_SIZE } from './constants.js';
-import cssClasses from '../../css/loader/main.module.less.js';
 
 var Loader = function Loader(_ref) {
   var size = _ref.size,

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/with_loader/css_classes.d.ts

@@ -1 +1,2 @@
+export declare const cssWithLoaderWrapper = "with-loader-wrapper";
 export declare const cssWithLoader = "with-loader";

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

@@ -1,4 +1,5 @@
+var cssWithLoaderWrapper = 'with-loader-wrapper';
 var cssWithLoader = 'with-loader';
 
-export { cssWithLoader };
+export { cssWithLoader, cssWithLoaderWrapper };
 //# sourceMappingURL=css_classes.js.map

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

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

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

@@ -2,18 +2,21 @@ import React from 'react';
 import classnames from 'classnames';
 import Loader from '../loader/index.js';
 import cssClasses from '../../css/with-loader/main.module.less.js';
-import { cssWithLoader } from './css_classes.js';
+import { cssWithLoaderWrapper, cssWithLoader } from './css_classes.js';
 
 var WithLoader = function WithLoader(_ref) {
   var isLoading = _ref.isLoading,
+      textOnLoading = _ref.textOnLoading,
       children = _ref.children,
       size = _ref.size;
   return isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: classnames(cssClasses[cssWithLoaderWrapper])
+  }, /*#__PURE__*/React.createElement("div", {
     className: classnames(cssClasses[cssWithLoader]),
     "data-test-id": "loader"
   }, /*#__PURE__*/React.createElement(Loader, {
     size: size
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }), textOnLoading && /*#__PURE__*/React.createElement("span", null, textOnLoading))) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
 export default WithLoader;

package/build/esm/packages/aurora/src/components/with_loader/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;"}
+{"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;"}

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

@@ -1,8 +1,9 @@
-/// <reference types="react" />
 import { ILoaderProps } from "../loader/types";
 import { TLoaderSize } from "../loader/types";
+import { ReactNode } from 'react';
 export interface IWithLoader extends ILoaderProps {
     size?: TLoaderSize;
     children?: React.ReactNode;
-    isLoading: boolean;
+    isLoading?: boolean;
+    textOnLoading?: ReactNode;
 }

package/build/esm/packages/aurora/src/components/with_loader/types.js

@@ -1,3 +1,4 @@
 import '@auroraComponents/loader/types';
 import '@auroraComponents/loader/types';
+import 'react';
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/with_loader/types.ts"],"names":[],"mappings":"AAAA,OAA6B,gCAAgC,CAAC;AAC9D,OAA4B,gCAAgC,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/with_loader/types.ts"],"names":[],"mappings":"AAAA,OAA6B,gCAAgC,CAAC;AAC9D,OAA4B,gCAAgC,CAAC;AAC7D,OAA0B,OAAO,CAAC"}

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

@@ -59,6 +59,11 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       imageEditorResult = _useState8[0],
       setImageEditorResult = _useState8[1];
 
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isLoading = _useState10[0],
+      setIsLoading = _useState10[1];
+
   var handleControlChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
       var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, data;
@@ -66,7 +71,8 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
+            fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl; // !fileAsDataUrl ? setIsLoading(true) : setIsLoading(false);
+
             fileList && setImage(fileList[0]);
             onChange === null || onChange === void 0 || onChange({
               fileList: fileList,
@@ -81,6 +87,8 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
             return _context.abrupt("return");
 
           case 5:
+            setIsLoading(true);
+
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
@@ -92,14 +100,15 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
               data: fileList[0]
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.next = 10;
+            _context.next = 11;
             return response;
 
-          case 10:
+          case 11:
             data = _context.sent;
             onUploaded === null || onUploaded === void 0 || onUploaded(data, fileList[0]);
+            setIsLoading(false);
 
-          case 12:
+          case 14:
           case "end":
             return _context.stop();
         }
@@ -178,7 +187,8 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       },
       type: "button"
     }, /*#__PURE__*/React.createElement(IconImage, null), t('Edit')),
-    editedImageResult: imageEditorResult
+    editedImageResult: imageEditorResult,
+    isLoaderVisible: isLoading
   }), ImageEditor && /*#__PURE__*/React.createElement(ModalNew, {
     name: modalId,
     header: t('Edit image'),