@dreamcommerce/aurora 2.17.21 → 2.17.22-1

package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js

@@ -9,12 +9,14 @@ import { ColorPickerFooter } from './color-picker-footer.js';
 import { ColorPickerHeader } from './color-picker-header.js';
 import { ColorPickerInputs } from './color-picker-inputs/color-picker-inputs.js';
 import { ColorPickerSwatch } from './color-picker-swatch.js';
-import { ColorPickerSwatches } from './color-picker-swatches.js';
-import Dropdown from '../../dropdown/index.js';
+import { ColorPickerShades } from './color-picker-shades.js';
+import { ColorPickerVariables } from './color-picker-variables.js';
+import Dropdown from '../../dropdown/components/dropdown.js';
 
 var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
   var id = _ref.id,
-      name = _ref.name;
+      name = _ref.name,
+      colorVariables = _ref.colorVariables;
 
   var _useContext = useContext(ColorPickerNewContext),
       color = _useContext.color,
@@ -33,7 +35,8 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
     name: name
   }))), /*#__PURE__*/React.createElement(Dropdown.Content, {
     shouldCloseOnClickOutside: false,
-    shouldCloseOnScroll: false
+    shouldCloseOnScroll: false,
+    shouldCloseOthersOnOpen: true
   }, /*#__PURE__*/React.createElement(ColorPickerHeader, null), /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssColorPickerContainer])
   }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -48,7 +51,9 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
     hideInputs: true,
     hidePresets: true,
     className: "".concat(styles[cssColorPickerRbgcp])
-  }), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(ColorPickerSwatches, null)), /*#__PURE__*/React.createElement(ColorPickerFooter, null))));
+  }), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(ColorPickerShades, null), colorVariables.isVisible && /*#__PURE__*/React.createElement(ColorPickerVariables, {
+    variables: colorVariables.variables
+  })), /*#__PURE__*/React.createElement(ColorPickerFooter, null))));
 };
 
 export default ColorPickerNewPure;

package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker_new/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const COLOR_PICKER_INITIAL_STATE = "#000000";
-export declare const COLOR_PICKER_WIDTH = 220;
+export declare const COLOR_PICKER_WIDTH = 247;
 export declare const COLOR_PICKER_HEIGHT = 200;
 export declare const COLOR_PICKER_ALPHA_MAX_VALUE = 100;
 export declare const COLOR_PICKER_TYPES: {

package/build/esm/packages/aurora/src/components/color_picker_new/constants.js

@@ -1,5 +1,5 @@
 var COLOR_PICKER_INITIAL_STATE = '#000000';
-var COLOR_PICKER_WIDTH = 220;
+var COLOR_PICKER_WIDTH = 247;
 var COLOR_PICKER_HEIGHT = 200;
 var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
 var COLOR_PICKER_TYPES = {

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

@@ -5,7 +5,10 @@ export declare const cssColorPickerHeader = "color-picker__header";
 export declare const cssColorPickerCloseIcon = "color-picker__close-icon";
 export declare const cssColorPickerSwatches = "color-picker__swatches";
 export declare const cssColorPickerSwatchesHeader = "color-picker__swatches-header";
+export declare const cssColorPickerSwatchesHeaderIcon = "color-picker__swatches-header-icon";
+export declare const cssColorPickerSwatchesHeaderIconRotate = "color-picker__swatches-header-icon_rotate-180";
 export declare const cssColorPickerSwatchesContent = "color-picker__swatches-content";
+export declare const cssColorPickerSwatchesSubContent = "color-picker__swatches-subcontent";
 export declare const cssColorPickerSwatch = "color-picker__swatch";
 export declare const cssColorPickerSwatchSmall = "color-picker__swatch_small";
 export declare const cssColorPickerSwatchBig = "color-picker__swatch_big";

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

@@ -5,7 +5,10 @@ var cssColorPickerHeader = 'color-picker__header';
 var cssColorPickerCloseIcon = 'color-picker__close-icon';
 var cssColorPickerSwatches = 'color-picker__swatches';
 var cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
+var cssColorPickerSwatchesHeaderIcon = 'color-picker__swatches-header-icon';
+var cssColorPickerSwatchesHeaderIconRotate = 'color-picker__swatches-header-icon_rotate-180';
 var cssColorPickerSwatchesContent = 'color-picker__swatches-content';
+var cssColorPickerSwatchesSubContent = 'color-picker__swatches-subcontent';
 var cssColorPickerSwatch = 'color-picker__swatch';
 var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
 var cssColorPickerSwatchBig = 'color-picker__swatch_big';
@@ -18,5 +21,5 @@ var cssColorPickerInputsValue = 'color-picker__inputs-value';
 var cssColorPickerInputsValueContainer = 'color-picker__inputs-value-container';
 var cssColorPickerFooter = 'color-picker__footer';
 
-export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader };
+export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesSubContent };
 //# sourceMappingURL=css_classes.js.map

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

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

@@ -1,3 +1,3 @@
 import { IColorPickerNewProps } from './types';
-declare const ColorPickerNewWithContext: ({ id, name, initialColor, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
+declare const ColorPickerNewWithContext: ({ id, name, initialColor, colorVariables, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
 export default ColorPickerNewWithContext;

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

@@ -7,6 +7,7 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
   var id = _ref.id,
       name = _ref.name,
       initialColor = _ref.initialColor,
+      colorVariables = _ref.colorVariables,
       onChange = _ref.onChange,
       onCancel = _ref.onCancel,
       onSave = _ref.onSave;
@@ -52,7 +53,8 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
     value: value
   }, /*#__PURE__*/React.createElement(ColorPickerNewPure, {
     id: id,
-    name: name
+    name: name,
+    colorVariables: colorVariables
   }));
 };
 

package/build/esm/packages/aurora/src/components/color_picker_new/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;"}
+{"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/esm/packages/aurora/src/components/color_picker_new/types.d.ts

@@ -2,11 +2,24 @@ import { Dispatch, SetStateAction } from 'react';
 export interface IColorPickerNewPureProps {
     id: string;
     name?: string;
+    colorVariables: IColorPickerColorVariables;
+}
+export interface IColorPickerColorVariables {
+    isVisible: boolean;
+    variables: IColorPickerColorVariablesType;
+}
+export interface IColorPickerColorVariablesType {
+    primary: string;
+    secondary: string;
+    neutral: string;
+    text: string;
+    background: string;
 }
 export interface IColorPickerNewProps {
     id: string;
     name?: string;
     initialColor?: ColorPickerColorTypes['hex'] | undefined;
+    colorVariables: IColorPickerColorVariables;
     onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
     onSave?: (color: IColorPickerColor) => void;

package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts

@@ -6,3 +6,11 @@ export declare const getHexValue: (colorSet: tinycolor.Instance) => string;
 export declare const getHexValueString: (colorSet: tinycolor.Instance) => string;
 export declare const isHexChar: (value: string) => boolean;
 export declare const getAllColorTypes: (color: string) => IColorPickerColor;
+export declare const getVariableShades: ({ color, isNeutral }: {
+    color: string;
+    isNeutral?: boolean | undefined;
+}) => {
+    h: number;
+    s: number;
+    l: number;
+}[];

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

@@ -1,3 +1,4 @@
+import { toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
 
 var getTinyColorInstance = function getTinyColorInstance(color) {
@@ -33,6 +34,73 @@ var getAllColorTypes = function getAllColorTypes(color) {
     hexString: hexString
   };
 };
+var getVariableShades = function getVariableShades(_ref) {
+  var color = _ref.color,
+      _ref$isNeutral = _ref.isNeutral,
+      isNeutral = _ref$isNeutral === void 0 ? false : _ref$isNeutral;
+  var colorTiny = getTinyColorInstance(color);
+  var colorHsl = colorTiny.toHsl();
+  var blackShade = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 100
+  }];
+  var whiteShade = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 0
+  }];
+  var shades = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 99
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 98
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 95
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 90
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 80
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 70
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 60
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 50
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 40
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 30
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 20
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 10
+  }];
+  return [].concat(_toConsumableArray(isNeutral ? blackShade : []), shades, _toConsumableArray(isNeutral ? whiteShade : []));
+};
 
-export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance, isHexChar };
+export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance, getVariableShades, isHexChar };
 //# sourceMappingURL=utilities.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controls/hoc/control_color_picker/index.js

@@ -5,7 +5,7 @@ import withTranslation from '../../../../utilities/translation/with_translation.
 import { PureColorPicker } from '../../../color_picker/index.js';
 import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
-import Dropdown from '../../../dropdown/index.js';
+import Dropdown from '../../../dropdown/components/dropdown.js';
 import ColorPickerLabel from '../../../color_picker/components/label.js';
 
 /**

package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js

@@ -12,6 +12,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
       errors = _ref.errors,
       labelAdditionalInfo = _ref.labelAdditionalInfo,
       initialColor = _ref.initialColor,
+      colorVariables = _ref.colorVariables,
       onChange = _ref.onChange,
       onCancel = _ref.onCancel,
       onSave = _ref.onSave;
@@ -30,6 +31,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
     id: id,
     name: name,
     initialColor: initialColor,
+    colorVariables: colorVariables,
     onChange: onChange,
     onCancel: onCancel,
     onSave: onSave

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

package/build/esm/packages/aurora/src/components/controls/hoc/control_date_picker/index.js

@@ -3,7 +3,7 @@ import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_
 import withTranslation from '../../../../utilities/translation/with_translation.js';
 import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
-import Dropdown from '../../../dropdown/index.js';
+import Dropdown from '../../../dropdown/components/dropdown.js';
 import useValueController from '../../../date_picker/hooks/use_value_controller.js';
 import DatepickerContext from '../../../date_picker/context/value_controller_context.js';
 import { RangePicker } from '../../../date_picker/hoc/range_picker.js';

package/build/esm/packages/aurora/src/components/date_picker/components/month_controller.js

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import Dropdown from '../../dropdown/index.js';
+import Dropdown from '../../dropdown/components/dropdown.js';
 import { DATE_PICKER_TEST_ID } from '../constants.js';
 import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
 import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../css_classes.js';

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

@@ -18,6 +18,8 @@ import { useClickOutside } from '../../../hooks/use_click_outside.js';
 import IconArrow from '../../../assets/icon_arrow.js';
 import cssClasses$1 from '../../../css/hint/main.module.less.js';
 import cssClasses$2 from '../../../css/tooltip/main.module.less.js';
+import { useDropdownsManagerContext } from '../hooks/use_dropdowns_manager_context.js';
+import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
 
 /**
  * Dropdown.Content component. This togglable part of dropdown.
@@ -43,7 +45,9 @@ var Content = function Content(_ref) {
       shouldCloseOnClickOutside = _ref$shouldCloseOnCli === void 0 ? true : _ref$shouldCloseOnCli,
       onClickOutside = _ref.onClickOutside,
       _ref$shouldCloseOnScr = _ref.shouldCloseOnScroll,
-      shouldCloseOnScroll = _ref$shouldCloseOnScr === void 0 ? true : _ref$shouldCloseOnScr;
+      shouldCloseOnScroll = _ref$shouldCloseOnScr === void 0 ? true : _ref$shouldCloseOnScr,
+      _ref$shouldCloseOther = _ref.shouldCloseOthersOnOpen,
+      shouldCloseOthersOnOpen = _ref$shouldCloseOther === void 0 ? false : _ref$shouldCloseOther;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -54,6 +58,8 @@ var Content = function Content(_ref) {
   var _useDropdownContext = useDropdownContext(),
       wrapperRef = _useDropdownContext.wrapperRef,
       toggleDropdown = _useDropdownContext.toggleDropdown,
+      openDropdown = _useDropdownContext.openDropdown,
+      closeDropdown = _useDropdownContext.closeDropdown,
       isOpen = _useDropdownContext.isOpen;
 
   var _useState = useState(),
@@ -66,6 +72,15 @@ var Content = function Content(_ref) {
       parentScrollTop = _useState4[0],
       setParentScrollTop = _useState4[1];
 
+  var dropdownIdRef = useRef("dropdown-".concat(v4()));
+
+  var _useDropdownsManagerC = useDropdownsManagerContext(),
+      addDropdown = _useDropdownsManagerC.addDropdown,
+      updateDropdown = _useDropdownsManagerC.updateDropdown,
+      getDropdown = _useDropdownsManagerC.getDropdown;
+
+  var dropdown = getDropdown(dropdownIdRef.current);
+
   var _useState5 = useState({
     top: '0px',
     bottom: '0px',
@@ -78,6 +93,23 @@ var Content = function Content(_ref) {
 
   var windowYScroll = window.scrollY;
   var windowHeightMinusYOffset = window.innerHeight - windowYScroll;
+  useEffect(function () {
+    addDropdown({
+      id: dropdownIdRef.current,
+      isOpen: false
+    });
+  }, []);
+  useEffect(function () {
+    updateDropdown({
+      id: dropdownIdRef.current,
+      isOpen: !!isOpen
+    });
+  }, [isOpen]);
+  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]);
   useEffect(function () {
     contentRef.current && setBounding(getBounding(contentRef.current));
     return function () {

package/build/esm/packages/aurora/src/components/dropdown/components/content.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/dropdown.d.ts

@@ -0,0 +1,23 @@
+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;

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

@@ -0,0 +1,92 @@
+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 { useDropdownsManagerContext } from '../hooks/use_dropdowns_manager_context.js';
+import Content from './content.js';
+import CustomLabel from './custom_label.js';
+import Header from './header.js';
+import Item from './item.js';
+import ItemWithHover from './item_with_hover.js';
+import Label from './label.js';
+import Link from './link.js';
+import List from './list.js';
+import Option from './option.js';
+import { useToggle } from '../hooks/use_toggle.js';
+import OptionMultiple from './option_multiple.js';
+import Search from './search.js';
+import Select from './select.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 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 _useDropdownsManagerC = useDropdownsManagerContext(),
+      closeAllDropdowns = _useDropdownsManagerC.closeAllDropdowns;
+
+  var _useToggle = useToggle(defaultIsOpen, onToggle, closeAllDropdowns),
+      _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 () {
+    return {
+      wrapperRef: wrapperRef,
+      isOpen: isOpen,
+      toggleDropdown: toggleDropdown,
+      openDropdown: openDropdown,
+      closeDropdown: closeDropdown
+    };
+  }, [isOpen, toggleDropdown, openDropdown, closeDropdown]);
+  return /*#__PURE__*/React.createElement(DropdownContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
+    className: cssClasses.dropdown
+  }, 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;
+//# sourceMappingURL=dropdown.js.map

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