@dreamcommerce/aurora 2.27.14 → 2.27.15-1

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

@@ -0,0 +1,283 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useClickOutside } from '../../../hooks/use_click_outside.js';
+import { SCREEN_XS } from '../../../constants/responsive_breakpoints.js';
+import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
+import cssClasses$3 from '../../../css/icons/main.module.less.js';
+import classnames from 'classnames';
+import { createPortal } from 'react-dom';
+import { useDropdownContext } from '../context/index.js';
+import withTranslation from '../../../utilities/translation/with_translation.js';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { DROPDOWN_Z_INDEX, DROPDOWN_CONTENT_ARROW_HEIGHT, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
+import { jsDropdownContentClass, cssDropdownContent, cssDropdownContentOnTop, cssDropdownContentOnBottom, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
+import cssClasses from '../../../css/dropdown/main.module.less.js';
+import { getBounding, getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
+import IconArrow from '../../../assets/icon_arrow.js';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+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.
+ * @component
+ * @example
+ * <Dropdown.Content> ... </Dropdown.Content>
+ */
+
+var Content = function Content(_ref) {
+  var headerComponent = _ref.headerComponent,
+      headerGoBackText = _ref.headerGoBackText,
+      headerGoBackIcon = _ref.headerGoBackIcon,
+      children = _ref.children,
+      _ref$arrowSide = _ref.arrowSide,
+      arrowSide = _ref$arrowSide === void 0 ? 'left' : _ref$arrowSide,
+      _ref$horizontalPositi = _ref.horizontalPosition,
+      horizontalPosition = _ref$horizontalPositi === void 0 ? 'left' : _ref$horizontalPositi,
+      _ref$verticalPosition = _ref.verticalPosition,
+      verticalPosition = _ref$verticalPosition === void 0 ? 'bottom' : _ref$verticalPosition,
+      cssClass = _ref.cssClass,
+      portalContainer = _ref.portalContainer,
+      _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(),
+      _useTranslation2 = _slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
+
+  var contentRef = useRef(null);
+
+  var _useDropdownContext = useDropdownContext(),
+      wrapperRef = _useDropdownContext.wrapperRef,
+      toggleDropdown = _useDropdownContext.toggleDropdown,
+      openDropdown = _useDropdownContext.openDropdown,
+      closeDropdown = _useDropdownContext.closeDropdown,
+      isOpen = _useDropdownContext.isOpen;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      bounding = _useState2[0],
+      setBounding = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      parentScrollTop = _useState4[0],
+      setParentScrollTop = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      fitOnBottomOfScrollableParent = _useState6[0],
+      setFitOnBottomOfScrollableParent = _useState6[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 _useState7 = useState({
+    top: '0px',
+    bottom: '0px',
+    left: '0px',
+    zIndex: DROPDOWN_Z_INDEX
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      styles = _useState8[0],
+      setStyles = _useState8[1];
+
+  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 () {
+      setBounding(undefined);
+    };
+  }, [contentRef.current]);
+
+  var checkIfIsOutsideTopViewport = function checkIfIsOutsideTopViewport() {
+    if (!contentRef.current || !bounding || !isOpen) return;
+    return bounding.top <= 0;
+  };
+
+  var checkIfIsOutsideBottomViewport = function checkIfIsOutsideBottomViewport() {
+    if (!contentRef.current || !bounding || !isOpen) return;
+    return bounding.height + bounding.top + DROPDOWN_CONTENT_ARROW_HEIGHT > window.innerHeight && !fitOnBottomOfScrollableParent;
+  };
+
+  var dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
+  var dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
+  var contentShouldAppearOnTop = dropdownIsOutsideBottomViewport || verticalPosition === 'top' && !dropdownIsOutsideTopViewport;
+  var contentShouldAppearOnBottom = dropdownIsOutsideTopViewport || verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport;
+  var contentClassName = classnames(jsDropdownContentClass, cssClasses[cssDropdownContent], contentShouldAppearOnTop && "".concat(cssClasses$1[cssDropdownContentOnTop], " ").concat(cssClasses$2[cssDropdownContentOnTop]), contentShouldAppearOnBottom && "".concat(cssClasses$1[cssDropdownContentOnBottom], " ").concat(cssClasses$2[cssDropdownContentOnBottom]), arrowSide === 'right' && cssClasses[cssDropdownArrowHorizontalDirectionRight], contentShouldAppearOnTop && cssClasses[cssDropdownArrowVerticalDirectionBottom], cssClass);
+  var screenWidthName = useScreenDetect();
+  var refs = [contentRef];
+
+  if (wrapperRef) {
+    refs.push(wrapperRef);
+  }
+
+  useClickOutside({
+    refs: refs,
+    callback: function callback() {
+      if (typeof toggleDropdown === 'function' && shouldCloseOnClickOutside) {
+        toggleDropdown();
+        onClickOutside === null || onClickOutside === void 0 || onClickOutside();
+      }
+    }
+  });
+  useEffect(function () {
+    if (wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && contentRef.current) {
+      var _getBounding2 = getBounding(wrapperRef.current),
+          wrapperXPosition = _getBounding2.x,
+          wrapperYPosition = _getBounding2.y,
+          wrapperWidth = _getBounding2.width,
+          wrapperHeight = _getBounding2.height;
+
+      var _getBounding4 = getBounding(contentRef.current),
+          contentWidth = _getBounding4.width;
+
+      var _getXYModifiersForNes2 = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current),
+          xModifier = _getXYModifiersForNes2.xModifier,
+          yModifier = _getXYModifiersForNes2.yModifier;
+
+      var yOffset = 10;
+      var isInModal = isChildOfModal(wrapperRef);
+      var zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;
+      var positionTop = wrapperHeight + wrapperYPosition + windowYScroll + yOffset - yModifier;
+      var positionBottom = windowHeightMinusYOffset - wrapperYPosition + yOffset;
+      var positionLeft = wrapperXPosition - xModifier;
+      var topPositionValue = '';
+      var bottomPositionValue = '';
+      var leftPositionValue = '';
+      var leftPositionStickedToRightBorderValue = wrapperXPosition + wrapperWidth - contentWidth;
+
+      var setTopPosition = function setTopPosition() {
+        topPositionValue = 'auto';
+        bottomPositionValue = "".concat(positionBottom, "px");
+      };
+
+      var setBottomPosition = function setBottomPosition() {
+        topPositionValue = "".concat(positionTop, "px");
+        bottomPositionValue = 'auto';
+      };
+
+      horizontalPosition === 'left' ? leftPositionValue = "".concat(positionLeft, "px") : leftPositionValue = "".concat(leftPositionStickedToRightBorderValue, "px");
+
+      if (verticalPosition === 'top') {
+        setTopPosition();
+        if (dropdownIsOutsideTopViewport) setBottomPosition();
+      }
+
+      if (verticalPosition === 'bottom') {
+        setBottomPosition();
+        if (dropdownIsOutsideBottomViewport && !fitOnBottomOfScrollableParent) setTopPosition();
+      }
+
+      screenWidthName === SCREEN_XS ? setStyles({
+        top: "0px",
+        bottom: 'auto',
+        left: "0px",
+        zIndex: zIndex
+      }) : setStyles({
+        top: topPositionValue,
+        bottom: bottomPositionValue,
+        left: leftPositionValue,
+        zIndex: zIndex
+      });
+    }
+  }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideTopViewport, dropdownIsOutsideBottomViewport, windowYScroll, windowHeightMinusYOffset, parentScrollTop, fitOnBottomOfScrollableParent]);
+  useEffect(function () {
+    var _UiDomUtils$getFirstS;
+
+    if (!(wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current) || !isOpen) return;
+    var scrollableParent = (_UiDomUtils$getFirstS = UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _UiDomUtils$getFirstS !== void 0 ? _UiDomUtils$getFirstS : document.body;
+    var wrapperRect = wrapperRef.current.getBoundingClientRect();
+
+    var handleWindowScroll = function handleWindowScroll() {
+      if (typeof toggleDropdown === 'function' && shouldCloseOnScroll) {
+        toggleDropdown();
+      }
+    };
+
+    var setParentScrollTopValue = function setParentScrollTopValue() {
+      setParentScrollTop(scrollableParent.scrollTop);
+    };
+
+    scrollableParent.addEventListener('scroll', handleWindowScroll, {
+      once: true
+    });
+    scrollableParent.addEventListener('scroll', setParentScrollTopValue);
+    requestAnimationFrame(function () {
+      var _contentRef$current;
+
+      var scrollableParentHeight = scrollableParent === null || scrollableParent === void 0 ? void 0 : scrollableParent.scrollHeight;
+      var scrollableParentBottomSpace = scrollableParentHeight - (wrapperRect.bottom - scrollableParent.offsetTop + scrollableParent.scrollTop);
+      var dropdownHeight = contentRef === null || contentRef === void 0 || (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetHeight;
+      if (dropdownHeight) setFitOnBottomOfScrollableParent(scrollableParentBottomSpace > dropdownHeight);
+    });
+    return function () {
+      scrollableParent.removeEventListener('scroll', handleWindowScroll);
+      scrollableParent.removeEventListener('scroll', setParentScrollTopValue);
+    };
+  }, [isOpen]);
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(TransitionGroup, {
+    component: null
+  }, isOpen === true ? /*#__PURE__*/React.createElement(CSSTransition, {
+    timeout: 200,
+    classNames: {
+      enter: cssClasses['dropdown-enter'],
+      enterActive: cssClasses['dropdown-enter-active'],
+      exit: cssClasses['dropdown-exit'],
+      exitActive: verticalPosition === 'top' ? cssClasses['dropdown-exit-active'] : cssClasses['dropdown-exit-active-reversed']
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    style: styles,
+    className: contentClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cssClasses[cssDropdownHeader]
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return typeof toggleDropdown === 'function' && toggleDropdown();
+    }
+  }, headerComponent !== null && headerComponent !== void 0 ? headerComponent : /*#__PURE__*/React.createElement("div", {
+    className: cssClasses[cssDropdownHeaderContent]
+  }, headerGoBackIcon || /*#__PURE__*/React.createElement(IconArrow, {
+    className: cssClasses$3['icon_rotate-180']
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cssClasses[cssDropdownHeaderTitle]
+  }, headerGoBackText !== null && headerGoBackText !== void 0 ? headerGoBackText : t('Go back'))))), children)) : null), (portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current) || document.body);
+};
+
+var Content$1 = withTranslation(Content);
+
+export default Content$1;
+//# sourceMappingURL=content.js.map

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

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

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

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

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

@@ -0,0 +1,31 @@
+import React, { useRef } from 'react';
+import { useDropdownContext } from '../context/index.js';
+import { useKeyboardOpenClose } from '../hooks/use_keyboard_open_close.js';
+
+var CustomLabel = function CustomLabel(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled;
+
+  var _useDropdownContext = useDropdownContext(),
+      toggleDropdown = _useDropdownContext.toggleDropdown,
+      isOpen = _useDropdownContext.isOpen;
+
+  var ref = useRef(null);
+  useKeyboardOpenClose(toggleDropdown, isOpen, ref);
+
+  var handleOnClick = function handleOnClick(ev) {
+    if (disabled) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    toggleDropdown && toggleDropdown();
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: handleOnClick,
+    ref: ref,
+    tabIndex: 0
+  }, children);
+};
+
+export default CustomLabel;
+//# sourceMappingURL=custom_label.js.map

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

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,94 @@
+import React, { useRef } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useToggle } from '../hooks/use_toggle.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 OptionMultiple from './option_multiple.js';
+import Search from './search.js';
+import Select from './select.js';
+import { MemoizedContent } from './memoized_content.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.MemoizedContent = MemoizedContent;
+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;AACA;AACA;"}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDropdownHeaderProps } from '../types';
+/**
+ * Dropdown.Header component. Header for options groups. Should be only used within Dropdown.List
+ * @component
+ * @example
+ * <Dropdown.Header text="Some header" />
+ */
+declare const Header: React.FC<IDropdownHeaderProps>;
+export default Header;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cssDropdownListHead } from '../css_classes.js';
+import cssClasses from '../../../css/dropdown/main.module.less.js';
+import cssClasses$1 from '../../../css/heading/main.module.less.js';
+
+/**
+ * Dropdown.Header component. Header for options groups. Should be only used within Dropdown.List
+ * @component
+ * @example
+ * <Dropdown.Header text="Some header" />
+ */
+
+var Header = function Header(_ref) {
+  var text = _ref.text;
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("div", {
+    className: cssClasses[cssDropdownListHead]
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cssClasses$1['head_line']
+  }, text)));
+};
+
+export default Header;
+//# sourceMappingURL=header.js.map

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDropdownItemProps } from '../types';
+/**
+ * Dropdown.Item component. Generic dropdown item
+ * @component
+ * @example
+ * <Dropdown.Item> ... </Dropdown.Item>
+ */
+declare const Item: React.FC<IDropdownItemProps>;
+export default Item;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useDropdownContext } from '../context/index.js';
+
+/**
+ * Dropdown.Item component. Generic dropdown item
+ * @component
+ * @example
+ * <Dropdown.Item> ... </Dropdown.Item>
+ */
+
+var Item = function Item(_ref) {
+  var children = _ref.children,
+      isSelected = _ref.isSelected,
+      _onClick = _ref.onClick;
+
+  var _useDropdownContext = useDropdownContext(),
+      toggleDropdown = _useDropdownContext.toggleDropdown;
+
+  return /*#__PURE__*/React.createElement("li", {
+    role: "option",
+    "aria-selected": isSelected,
+    onClick: function onClick(ev) {
+      return _onClick && _onClick({
+        ev: ev,
+        toggleDropdown: toggleDropdown
+      });
+    }
+  }, children);
+};
+
+export default Item;
+//# sourceMappingURL=item.js.map

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

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

@@ -0,0 +1,10 @@
+import { IDropdownItemWithHover } from '../types';
+import React from 'react';
+/**
+ * Dropdown.ItemWithHover component. Generic dropdown item with hover state
+ * @component
+ * @example
+ * <Dropdown.ItemWithHover> ... </Dropdown.ItemWithHover>
+ */
+declare const ItemWithHover: React.FC<IDropdownItemWithHover>;
+export default ItemWithHover;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useDropdownContext } from '../context/index.js';
+import { cssDropdownItemWithHover } from '../css_classes.js';
+import cssClasses from '../../../css/dropdown/main.module.less.js';
+
+/**
+ * Dropdown.ItemWithHover component. Generic dropdown item with hover state
+ * @component
+ * @example
+ * <Dropdown.ItemWithHover> ... </Dropdown.ItemWithHover>
+ */
+
+var ItemWithHover = function ItemWithHover(_ref) {
+  var children = _ref.children,
+      cssClass = _ref.cssClass,
+      dataTestId = _ref.dataTestId,
+      _onMouseDown = _ref.onMouseDown;
+
+  var _useDropdownContext = useDropdownContext(),
+      toggleDropdown = _useDropdownContext.toggleDropdown;
+
+  var itemCssClass = "".concat(cssClasses[cssDropdownItemWithHover], " ").concat(cssClass);
+  return /*#__PURE__*/React.createElement("div", {
+    className: itemCssClass,
+    "data-test-id": dataTestId,
+    onMouseDown: function onMouseDown(ev) {
+      return _onMouseDown && _onMouseDown({
+        ev: ev,
+        toggleDropdown: toggleDropdown
+      });
+    }
+  }, children);
+};
+
+export default ItemWithHover;
+//# sourceMappingURL=item_with_hover.js.map

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDropdownLabelProps } from '../types';
+/**
+ * Dropdown.Label component. Use it for togglable element, if You dont need selectable values
+ * @component
+ * @example
+ * <Dropdown.Label label="More options" />
+ */
+declare const Label: React.FC<IDropdownLabelProps>;
+export default Label;

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

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import { useDropdownContext } from '../context/index.js';
+import { DROPDOWN_TEST_ID } from '../constants.js';
+import { useKeyboardOpenClose } from '../hooks/use_keyboard_open_close.js';
+
+/**
+ * Dropdown.Label component. Use it for togglable element, if You dont need selectable values
+ * @component
+ * @example
+ * <Dropdown.Label label="More options" />
+ */
+
+var Label = function Label(_ref) {
+  var label = _ref.label,
+      cssClass = _ref.cssClass,
+      disabled = _ref.disabled;
+
+  var _useDropdownContext = useDropdownContext(),
+      toggleDropdown = _useDropdownContext.toggleDropdown,
+      isOpen = _useDropdownContext.isOpen;
+
+  var ref = useRef(null);
+  useKeyboardOpenClose(toggleDropdown, isOpen, ref);
+
+  var handleOnClick = function handleOnClick() {
+    if (disabled) return;
+    toggleDropdown && toggleDropdown();
+  };
+
+  return /*#__PURE__*/React.createElement("span", {
+    onClick: handleOnClick,
+    tabIndex: 0,
+    ref: ref,
+    className: cssClass,
+    "data-test-id": DROPDOWN_TEST_ID.label
+  }, label);
+};
+
+export default Label;
+//# sourceMappingURL=label.js.map

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

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

@@ -0,0 +1,12 @@
+import { IDropdownLinkProps } from '../types';
+import React from 'react';
+/**
+ * Dropdown.Link component. Should be only used within Dropdown.List.
+ * @component
+ * @example
+ * <Dropdown.List isWithGroups={false}>
+ *  <Dropdown.Link text="shoper.pl" href="https://shoper.pl" target="_blank" />
+ * </Dropdown.List>
+ */
+declare const Link: React.FC<IDropdownLinkProps>;
+export default Link;