@dreamcommerce/aurora 2.18.0-1 → 2.18.0-3

package/build/cjs/packages/aurora/src/components/dropdown/components/content.js

@@ -22,6 +22,8 @@ var use_click_outside = require('../../../hooks/use_click_outside.js');
 var icon_arrow = require('../../../assets/icon_arrow.js');
 var main_module$1 = require('../../../css/hint/main.module.less.js');
 var main_module$2 = require('../../../css/tooltip/main.module.less.js');
+var use_dropdowns_manager_context = require('../hooks/use_dropdowns_manager_context.js');
+var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,7 +50,13 @@ var Content = function Content(_ref) {
       verticalPosition = _ref$verticalPosition === void 0 ? 'bottom' : _ref$verticalPosition,
       cssClass = _ref.cssClass,
       portalContainer = _ref.portalContainer,
-      onClickOutside = _ref.onClickOutside;
+      _ref$shouldCloseOnCli = _ref.shouldCloseOnClickOutside,
+      shouldCloseOnClickOutside = _ref$shouldCloseOnCli === void 0 ? true : _ref$shouldCloseOnCli,
+      onClickOutside = _ref.onClickOutside,
+      _ref$shouldCloseOnScr = _ref.shouldCloseOnScroll,
+      shouldCloseOnScroll = _ref$shouldCloseOnScr === void 0 ? true : _ref$shouldCloseOnScr,
+      _ref$shouldCloseOther = _ref.shouldCloseOthersOnOpen,
+      shouldCloseOthersOnOpen = _ref$shouldCloseOther === void 0 ? false : _ref$shouldCloseOther;
 
   var _useTranslation = useTranslation.useTranslation(),
       _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
@@ -59,6 +67,8 @@ var Content = function Content(_ref) {
   var _useDropdownContext = index.useDropdownContext(),
       wrapperRef = _useDropdownContext.wrapperRef,
       toggleDropdown = _useDropdownContext.toggleDropdown,
+      openDropdown = _useDropdownContext.openDropdown,
+      closeDropdown = _useDropdownContext.closeDropdown,
       isOpen = _useDropdownContext.isOpen;
 
   var _useState = React.useState(),
@@ -66,18 +76,49 @@ var Content = function Content(_ref) {
       bounding = _useState2[0],
       setBounding = _useState2[1];
 
-  var _useState3 = React.useState({
+  var _useState3 = React.useState(0),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      parentScrollTop = _useState4[0],
+      setParentScrollTop = _useState4[1];
+
+  var dropdownIdRef = React.useRef("dropdown-".concat(v4['default']()));
+
+  var _useDropdownsManagerC = use_dropdowns_manager_context.useDropdownsManagerContext(),
+      addDropdown = _useDropdownsManagerC.addDropdown,
+      updateDropdown = _useDropdownsManagerC.updateDropdown,
+      getDropdown = _useDropdownsManagerC.getDropdown;
+
+  var dropdown = getDropdown(dropdownIdRef.current);
+
+  var _useState5 = React.useState({
     top: '0px',
     bottom: '0px',
     left: '0px',
     zIndex: constants.DROPDOWN_Z_INDEX
   }),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      styles = _useState4[0],
-      setStyles = _useState4[1];
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      styles = _useState6[0],
+      setStyles = _useState6[1];
 
   var windowYScroll = window.scrollY;
   var windowHeightMinusYOffset = window.innerHeight - windowYScroll;
+  React.useEffect(function () {
+    addDropdown({
+      id: dropdownIdRef.current,
+      isOpen: false
+    });
+  }, []);
+  React.useEffect(function () {
+    updateDropdown({
+      id: dropdownIdRef.current,
+      isOpen: !!isOpen
+    });
+  }, [isOpen]);
+  React.useEffect(function () {
+    if (shouldCloseOthersOnOpen) {
+      dropdown !== null && dropdown !== void 0 && dropdown.isOpen ? openDropdown === null || openDropdown === void 0 ? void 0 : openDropdown() : closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+    }
+  }, [dropdown === null || dropdown === void 0 ? void 0 : dropdown.isOpen]);
   React.useEffect(function () {
     contentRef.current && setBounding(utilities.getBounding(contentRef.current));
     return function () {
@@ -110,7 +151,7 @@ var Content = function Content(_ref) {
   use_click_outside.useClickOutside({
     refs: refs,
     callback: function callback() {
-      if (typeof toggleDropdown === 'function') {
+      if (typeof toggleDropdown === 'function' && shouldCloseOnClickOutside) {
         toggleDropdown();
         onClickOutside === null || onClickOutside === void 0 || onClickOutside();
       }
@@ -176,7 +217,7 @@ var Content = function Content(_ref) {
         zIndex: zIndex
       });
     }
-  }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideTopViewport, dropdownIsOutsideBottomViewport, windowYScroll, windowHeightMinusYOffset]);
+  }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideTopViewport, dropdownIsOutsideBottomViewport, windowYScroll, windowHeightMinusYOffset, parentScrollTop]);
   React.useEffect(function () {
     var _UiDomUtils$getFirstS;
 
@@ -184,16 +225,22 @@ var Content = function Content(_ref) {
     var scrollableParent = (_UiDomUtils$getFirstS = utilities$1.UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _UiDomUtils$getFirstS !== void 0 ? _UiDomUtils$getFirstS : document.body;
 
     var handleWindowScroll = function handleWindowScroll() {
-      if (typeof toggleDropdown === 'function') {
+      if (typeof toggleDropdown === 'function' && shouldCloseOnScroll) {
         toggleDropdown();
       }
     };
 
+    var setParentScrollTopValue = function setParentScrollTopValue() {
+      setParentScrollTop(scrollableParent.scrollTop);
+    };
+
     scrollableParent.addEventListener('scroll', handleWindowScroll, {
       once: true
     });
+    scrollableParent.addEventListener('scroll', setParentScrollTopValue);
     return function () {
       scrollableParent.removeEventListener('scroll', handleWindowScroll);
+      scrollableParent.removeEventListener('scroll', setParentScrollTopValue);
     };
   }, [isOpen]);
   return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.TransitionGroup, {

package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/aurora/src/components/dropdown/components/dropdown.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../context/index.js');
+var main_module = require('../../../css/dropdown/main.module.less.js');
+var use_dropdowns_manager_context = require('../hooks/use_dropdowns_manager_context.js');
+var content = require('./content.js');
+var custom_label = require('./custom_label.js');
+var header = require('./header.js');
+var item = require('./item.js');
+var item_with_hover = require('./item_with_hover.js');
+var label = require('./label.js');
+var link = require('./link.js');
+var list = require('./list.js');
+var option = require('./option.js');
+var use_toggle = require('../hooks/use_toggle.js');
+var option_multiple = require('./option_multiple.js');
+var search = require('./search.js');
+var select = require('./select.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(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>
+ * )
+ */
+
+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 = React.useRef(null);
+
+  var _useDropdownsManagerC = use_dropdowns_manager_context.useDropdownsManagerContext(),
+      closeAllDropdowns = _useDropdownsManagerC.closeAllDropdowns;
+
+  var _useToggle = use_toggle.useToggle(defaultIsOpen, onToggle, closeAllDropdowns),
+      _useToggle2 = _rollupPluginBabelHelpers.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__default['default'].useMemo(function () {
+    return {
+      wrapperRef: wrapperRef,
+      isOpen: isOpen,
+      toggleDropdown: toggleDropdown,
+      openDropdown: openDropdown,
+      closeDropdown: closeDropdown
+    };
+  }, [isOpen, toggleDropdown, openDropdown, closeDropdown]);
+  return /*#__PURE__*/React__default['default'].createElement(index.DropdownContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: wrapperRef,
+    className: main_module['default'].dropdown
+  }, children));
+};
+
+Dropdown.Select = select['default'];
+Dropdown.Content = content['default'];
+Dropdown.ItemWithHover = item_with_hover['default'];
+Dropdown.Search = search['default'];
+Dropdown.List = list['default'];
+Dropdown.Header = header['default'];
+Dropdown.Option = option['default'];
+Dropdown.OptionMultiple = option_multiple['default'];
+Dropdown.Link = link['default'];
+Dropdown.Label = label['default'];
+Dropdown.CustomLabel = custom_label['default'];
+Dropdown.Item = item['default'];
+
+exports.default = Dropdown;
+//# sourceMappingURL=dropdown.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var DropdownsManagerContext = /*#__PURE__*/React.createContext({
+  addDropdown: function addDropdown() {},
+  updateDropdown: function updateDropdown() {},
+  getDropdown: function getDropdown() {
+    return undefined;
+  },
+  closeAllDropdowns: function closeAllDropdowns() {}
+});
+
+exports.DropdownsManagerContext = DropdownsManagerContext;
+//# sourceMappingURL=dropdowns_manager.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;"}

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

@@ -11,7 +11,7 @@ var utilities = require('../../utilities.js');
 var use_values = require('../../hooks/use_values.js');
 var use_toggle = require('../../hooks/use_toggle.js');
 var use_set_options_on_close = require('../../hooks/use_set_options_on_close.js');
-var index$1 = require('../../index.js');
+var dropdown = require('../../components/dropdown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -111,26 +111,26 @@ var Multiple = function Multiple(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: wrapperRef,
     className: main_module['default'][css_classes.cssDropdown]
-  }, /*#__PURE__*/React__default['default'].createElement(index$1['default'].Select, {
+  }, /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Select, {
     name: name,
     isReadonly: isReadonly,
     isDisabled: isDisabled,
     selectedOptions: selectedValues,
     onRemoveOptions: setSelectedValues,
     hasCloseIcon: hasCloseIcon
-  }), /*#__PURE__*/React__default['default'].createElement(index$1['default'].Content, null, isWithSearch && /*#__PURE__*/React__default['default'].createElement(index$1['default'].Search, {
+  }), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Content, null, isWithSearch && /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Search, {
     onKeyUp: function onKeyUp(ev) {
       return utilities.handleSearchKeyUp(ev, options, setOptionsList);
     }
-  }), /*#__PURE__*/React__default['default'].createElement(index$1['default'].List, {
+  }), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].List, {
     isWithGroups: isWithGroups
   }, optionsList === null || optionsList === void 0 ? void 0 : optionsList.map(function (option) {
     var _option$isDisabled, _option$isReadonly;
 
-    return option.isHeader ? /*#__PURE__*/React__default['default'].createElement(index$1['default'].Header, {
+    return option.isHeader ? /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Header, {
       key: option.text,
       text: option.text
-    }) : /*#__PURE__*/React__default['default'].createElement(index$1['default'].OptionMultiple, {
+    }) : /*#__PURE__*/React__default['default'].createElement(dropdown['default'].OptionMultiple, {
       key: option.value,
       option: option,
       isSelected: utilities.isSelected(option, selectedValues),

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

@@ -11,7 +11,7 @@ var utilities = require('../../utilities.js');
 var use_value = require('../../hooks/use_value.js');
 var use_toggle = require('../../hooks/use_toggle.js');
 var use_set_options_on_close = require('../../hooks/use_set_options_on_close.js');
-var index$1 = require('../../index.js');
+var dropdown = require('../../components/dropdown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -119,7 +119,7 @@ var Select = function Select(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: wrapperRef,
     className: main_module['default'][css_classes.cssDropdown]
-  }, /*#__PURE__*/React__default['default'].createElement(index$1['default'].Select, {
+  }, /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Select, {
     name: name,
     isReadonly: isReadonly,
     isDisabled: isDisabled,
@@ -127,22 +127,22 @@ var Select = function Select(_ref) {
     placeholder: placeholder,
     onRemoveOptions: setSelectedValues,
     hasCloseIcon: hasCloseIcon
-  }), /*#__PURE__*/React__default['default'].createElement(index$1['default'].Content, {
+  }), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Content, {
     portalContainer: portalContainer
-  }, isWithSearch && /*#__PURE__*/React__default['default'].createElement(index$1['default'].Search, {
+  }, isWithSearch && /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Search, {
     onKeyUp: function onKeyUp(ev) {
       return onSearch ? onSearch === null || onSearch === void 0 ? void 0 : onSearch(ev.target.value) : utilities.handleSearchKeyUp(ev, options, setOptionsList);
     }
-  }), /*#__PURE__*/React__default['default'].createElement(index$1['default'].List, {
+  }), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].List, {
     isWithGroups: isWithGroups,
     onScroll: onScroll
   }, optionsList === null || optionsList === void 0 ? void 0 : optionsList.map(function (option, index) {
     var _option$isDisabled, _option$isReadonly;
 
-    return option.isHeader ? /*#__PURE__*/React__default['default'].createElement(index$1['default'].Header, {
+    return option.isHeader ? /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Header, {
       key: option.text,
       text: option.text
-    }) : /*#__PURE__*/React__default['default'].createElement(index$1['default'].Option, {
+    }) : /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Option, {
       key: "".concat(option.value, "-").concat(index),
       option: option,
       isSelected: utilities.isSelected(option, selectedValues),

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+
+var useDropdownsManager = function useDropdownsManager() {
+  var _useState = React.useState([]),
+      _useState2 = _rollupPluginBabelHelpers.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 _rollupPluginBabelHelpers.toConsumableArray(stack);
+      } else {
+        return [].concat(_rollupPluginBabelHelpers.toConsumableArray(stack), [dropdown]);
+      }
+    });
+  };
+
+  var updateDropdown = function updateDropdown(dropdown) {
+    setDropdownsStack(function (previousStack) {
+      var updatedStack = previousStack.map(function (stackDropdown) {
+        return stackDropdown.id === dropdown.id ? _rollupPluginBabelHelpers.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
+  };
+};
+
+exports.default = useDropdownsManager;
+//# sourceMappingURL=use_dropdowns_manager.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var dropdowns_manager = require('../context/dropdowns_manager.js');
+
+function useDropdownsManagerContext() {
+  var context = React.useContext(dropdowns_manager.DropdownsManagerContext);
+
+  if (Object.keys(context).length === 0 && context.constructor === Object) {
+    throw new Error("Dropdown cannot be rendered outside the DropdownsManagerContext");
+  }
+
+  return context;
+}
+
+exports.useDropdownsManagerContext = useDropdownsManagerContext;
+//# sourceMappingURL=use_dropdowns_manager_context.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;"}

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

@@ -10,12 +10,14 @@ var use_effect_after_mount = require('../../../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 = React.useState(defaultIsOpen),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -23,7 +25,8 @@ function useToggle() {
       setIsOpen = _useState2[1];
 
   var onToggle = React.useCallback(function () {
-    return setIsOpen(function (oldIsOpen) {
+    closeAllDropdowns && closeAllDropdowns();
+    setIsOpen(function (oldIsOpen) {
       return !oldIsOpen;
     });
   }, []);

package/build/cjs/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;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;"}

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

@@ -3,94 +3,34 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('./context/index.js');
-var main_module = require('../../css/dropdown/main.module.less.js');
-var content = require('./components/content.js');
-var custom_label = require('./components/custom_label.js');
-var header = require('./components/header.js');
-var item = require('./components/item.js');
-var item_with_hover = require('./components/item_with_hover.js');
-var label = require('./components/label.js');
-var link = require('./components/link.js');
-var list = require('./components/list.js');
-var option = require('./components/option.js');
-var use_toggle = require('./hooks/use_toggle.js');
-var option_multiple = require('./components/option_multiple.js');
-var search = require('./components/search.js');
-var select = require('./components/select.js');
+var dropdowns_manager = require('./context/dropdowns_manager.js');
+var use_dropdowns_manager = require('./hooks/use_dropdowns_manager.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(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>
- * )
- */
+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 = React.useRef(null);
+  var _useDropdownsManager = use_dropdowns_manager['default'](),
+      addDropdown = _useDropdownsManager.addDropdown,
+      updateDropdown = _useDropdownsManager.updateDropdown,
+      getDropdown = _useDropdownsManager.getDropdown,
+      closeAllDropdowns = _useDropdownsManager.closeAllDropdowns;
 
-  var _useToggle = use_toggle.useToggle(defaultIsOpen, onToggle),
-      _useToggle2 = _rollupPluginBabelHelpers.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__default['default'].useMemo(function () {
+  var value = React.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__default['default'].createElement(index.DropdownContext.Provider, {
+  }, [addDropdown, updateDropdown, getDropdown, closeAllDropdowns]);
+  return /*#__PURE__*/React__default['default'].createElement(dropdowns_manager.DropdownsManagerContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    ref: wrapperRef,
-    className: main_module['default'].dropdown
-  }, children));
+  }, children);
 };
 
-Dropdown.Select = select['default'];
-Dropdown.Content = content['default'];
-Dropdown.ItemWithHover = item_with_hover['default'];
-Dropdown.Search = search['default'];
-Dropdown.List = list['default'];
-Dropdown.Header = header['default'];
-Dropdown.Option = option['default'];
-Dropdown.OptionMultiple = option_multiple['default'];
-Dropdown.Link = link['default'];
-Dropdown.Label = label['default'];
-Dropdown.CustomLabel = custom_label['default'];
-Dropdown.Item = item['default'];
-
-exports.default = Dropdown;
+exports.default = DropdownsManager;
 //# sourceMappingURL=index.js.map

package/build/cjs/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;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;"}

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

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

package/build/cjs/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;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,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;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -97,8 +97,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);
   };
@@ -167,6 +170,7 @@ var useFilePicker = function useFilePicker(_ref) {
     onDragLeave: onDragLeave,
     onFileDelete: onFileDelete,
     onPreviewError: onPreviewError,
+    changeFile: changeFile,
     file: file,
     errors: errors,
     isPreview: isPreview,