@dreamcommerce/aurora 2.5.1 → 2.5.3-1

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
-import { cssDatePickerContainer } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import { MAX_MONTH, MIN_MONTH } from '../constants.js';
+import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import useAnimation from '../hooks/use_animation.js';
+import { cssDatePickerContainer } from '../css_classes.js';
 import DaysGrid from './days_grid.js';
 import MonthController from './month_controller.js';
 
@@ -38,7 +38,7 @@ const PureDatepicker = ({ className = '', setMonthYear, month, year }) => {
         setMonthYearWithDelay(({ year }) => ({ month, year }));
     };
     const setYear = (year) => setMonthYearWithDelay(({ month }) => ({ month, year }));
-    return (React.createElement("div", { className: `${className} ${cssClasses[cssDatePickerContainer]}` },
+    return (React.createElement("div", { className: `${className} ${styles[cssDatePickerContainer]}` },
         React.createElement(MonthYearNavigationContext.Provider, { value: {
                 previousMonth: prevMonthWithAnimation,
                 nextMonth: nextMonthWithAnimation,

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

@@ -1,9 +1,9 @@
 import React, { useContext, useMemo } from 'react';
 import { classNames } from '../../../utilities/styles/classNames.js';
+import { DATE_PICKER_TEST_ID } from '../constants.js';
 import DatepickerContext from '../context/value_controller_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerDay, cssDatePickerDayNavigation, cssDatePickerDaySelected, cssDatePickerDayBlocked, cssDatePickerDayProposed, cssDatePickerDayRangeEndLeft, cssDatePickerDayRangeEndLeftProposed, cssDatePickerDayRangeEndRight, cssDatePickerDayRangeEndRightProposed, cssDatePickerDayInRange, cssDatePickerDayText, cssDatePickerDayTextRoundedBorders, cssDatePickerDayTextNavigation, cssDatePickerDayTextToday, cssDatePickerDayTextSelected } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
-import { DATE_PICKER_TEST_ID } from '../constants.js';
 
 const SingleDay = ({ date, month, year }) => {
     const { updateDate, isSelected, isInRange, isNavigation, isBlocked, isToday, setHoverDate, isProposed } = useContext(DatepickerContext);
@@ -32,7 +32,7 @@ const SingleDay = ({ date, month, year }) => {
         lastRangeDay && proposed && cssDatePickerDayRangeEndRightProposed,
         oneDayRange && cssDatePickerDaySelected,
         inRange && cssDatePickerDayInRange
-    ], cssClasses), [navigation, selected, blocked, proposed, inRange, firstRangeDay, lastRangeDay, oneDayRange]);
+    ], styles), [navigation, selected, blocked, proposed, inRange, firstRangeDay, lastRangeDay, oneDayRange]);
     const dayTextClassName = useMemo(() => classNames([
         cssDatePickerDayText,
         roundedBorders && cssDatePickerDayTextRoundedBorders,
@@ -40,7 +40,7 @@ const SingleDay = ({ date, month, year }) => {
         today && navigation && cssDatePickerDayTextNavigation,
         today && cssDatePickerDayTextToday,
         selected && cssDatePickerDayTextSelected
-    ], cssClasses), [roundedBorders, selected, navigation, today]);
+    ], styles), [roundedBorders, selected, navigation, today]);
     return (React.createElement("div", { className: dayClassName, onClick: () => updateDate(new Date(year, month, date)), onMouseOver: () => {
             setHoverDate(new Date(year, month, date));
         } },

package/build/esm/packages/aurora/src/components/date_picker/hoc/range_picker.js

@@ -1,8 +1,8 @@
 import React, { useContext, useState, useEffect } from 'react';
 import DatepickerContext from '../context/value_controller_context.js';
-import { cssRangePicker, cssRangePickerContainer } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.js';
+import styles from '../../../css/date_picker/main.module.less.js';
+import { cssRangePicker, cssRangePickerContainer } from '../css_classes.js';
 import { PureDatepicker } from '../components/pure_date_picker.js';
 import CommonRanges from '../components/common_ranges.js';
 import Buttons from '../components/buttons.js';
@@ -36,9 +36,9 @@ const RangePicker = ({ className = '', showButtons, showDefaultRanges }) => {
         //eslint-disable-next-line
     }, [setEarlierMonthYear, laterMonthYear.year, laterMonthYear.month]);
     useKeyboardNavigation();
-    return (React.createElement("div", { className: cssClasses[cssRangePicker] },
+    return (React.createElement("div", { className: styles[cssRangePicker] },
         showDefaultRanges && React.createElement(CommonRanges, null),
-        React.createElement("div", { className: cssClasses[cssRangePickerContainer] },
+        React.createElement("div", { className: styles[cssRangePickerContainer] },
             React.createElement(PureDatepicker, { setMonthYear: setEarlierMonthYear, ...earlierMonthYear, className: className }),
             React.createElement(PureDatepicker, { setMonthYear: setLaterMonthYear, ...laterMonthYear, className: className })),
         showButtons && React.createElement(Buttons, null)));

package/build/esm/packages/aurora/src/components/date_picker/hoc/single_date_picker.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import DatepickerContext from '../context/value_controller_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePicker } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import { PureDatepicker } from '../components/pure_date_picker.js';
 import Buttons from '../components/buttons.js';
 
@@ -13,7 +13,7 @@ const SingleDatepicker = ({ className, showButtons }) => {
         year: currentDate.getFullYear()
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: cssClasses[cssDatePicker] },
+        React.createElement("div", { className: styles[cssDatePicker] },
             React.createElement(PureDatepicker, { setMonthYear: setMonthYear, month: month, year: year, className: className }),
             showButtons && React.createElement(Buttons, null))));
 };

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import DatepickerContext from './context/value_controller_context.js';
 import useValueController from './hooks/use_value_controller.js';
+import DatepickerContext from './context/value_controller_context.js';
 import { RangePicker } from './hoc/range_picker.js';
 export { RangePicker } from './hoc/range_picker.js';
 import { SingleDatepicker } from './hoc/single_date_picker.js';

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

@@ -1,20 +1,22 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { createPortal } from 'react-dom';
-import cssClasses$1 from '../../../css/icons/main.module.less.js';
+import cssClasses$3 from '../../../css/icons/main.module.less.js';
+import classnames from 'classnames';
 import { useDropdownContext } from '../context/index.js';
 import { SCREEN_XS } from '../../../constants/responsive_breakpoints.js';
 import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
 import withTranslation from '../../../utilities/translation/with_translation.js';
-import { classNames } from '../../../utilities/styles/classNames.js';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { DROPDOWN_Z_INDEX, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
-import { cssDropdownContent, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
+import { cssDropdownContent, cssDropdownContentOnTop, cssDropdownContentOnBottom, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
-import { getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
+import { getBounding, getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
 import { useClickOutside } from '../../../hooks/use_click_outside.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';
 
 /**
  * Dropdown.Content component. This togglable part of dropdown.
@@ -22,27 +24,36 @@ import { UiDomUtils } from '@dreamcommerce/utilities';
  * @example
  * <Dropdown.Content> ... </Dropdown.Content>
  */
-const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', portalContainer }) => {
+const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', horizontalPosition = 'left', verticalPosition = 'bottom', cssClass, portalContainer }) => {
     const [t] = useTranslation();
     const contentRef = useRef(null);
-    const { wrapperRef, toggleDropdown, isOpen, closeDropdown } = useDropdownContext();
+    const { wrapperRef, toggleDropdown, isOpen } = useDropdownContext();
     const [styles, setStyles] = useState({
-        left: '0px',
         top: '0px',
         bottom: '0px',
+        left: '0px',
         zIndex: DROPDOWN_Z_INDEX
     });
-    const windowHeightMinusYOffset = window.innerHeight - window.pageYOffset;
-    const checkIfIsOutsideBottomViewport = (elem) => {
-        const bounding = elem.getBoundingClientRect();
-        return bounding.bottom > windowHeightMinusYOffset;
+    const windowYScroll = window.scrollY;
+    const windowHeightMinusYOffset = window.innerHeight - windowYScroll;
+    const checkIfIsOutsideTopViewport = () => {
+        if (!contentRef.current)
+            return;
+        const bounding = getBounding(contentRef.current);
+        return bounding.top <= 0;
+    };
+    const checkIfIsOutsideBottomViewport = () => {
+        if (!contentRef.current)
+            return;
+        const element = contentRef.current;
+        const elementHeight = getBounding(element).height;
+        return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
     };
-    const dropdownIsOutsideBottomViewport = contentRef.current && checkIfIsOutsideBottomViewport(contentRef.current);
-    const contentClassName = classNames([
-        cssDropdownContent,
-        arrowSide === 'right' && cssDropdownArrowHorizontalDirectionRight,
-        dropdownIsOutsideBottomViewport && cssDropdownArrowVerticalDirectionBottom
-    ], cssClasses);
+    const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
+    const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
+    const contentShouldAppearOnTop = dropdownIsOutsideBottomViewport || (verticalPosition === 'top' && !dropdownIsOutsideTopViewport);
+    const contentShouldAppearOnBottom = dropdownIsOutsideTopViewport || (verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport);
+    const contentClassName = classnames(cssClasses[cssDropdownContent], contentShouldAppearOnTop && `${cssClasses$1[cssDropdownContentOnTop]} ${cssClasses$2[cssDropdownContentOnTop]}`, contentShouldAppearOnBottom && `${cssClasses$1[cssDropdownContentOnBottom]} ${cssClasses$2[cssDropdownContentOnBottom]}`, arrowSide === 'right' && cssClasses[cssDropdownArrowHorizontalDirectionRight], contentShouldAppearOnTop && cssClasses[cssDropdownArrowVerticalDirectionBottom], cssClass);
     const screenWidthName = useScreenDetect();
     const refs = [contentRef];
     if (wrapperRef) {
@@ -54,30 +65,63 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
         }
     });
     useEffect(() => {
-        if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
-            const { x, y, height } = wrapperRef.current.getBoundingClientRect();
-            const yOffset = 10;
+        if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && contentRef.current) {
+            const { x: wrapperXPosition, y: wrapperYPosition, width: wrapperWidth, height: wrapperHeight } = getBounding(wrapperRef.current);
+            const { width: contentWidth } = getBounding(contentRef.current);
             const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
-            const positionTop = height + y + yOffset - yModifier;
-            const positionBottom = windowHeightMinusYOffset - y + yOffset;
-            const positionLeft = x - xModifier;
+            const yOffset = 10;
             const isInModal = isChildOfModal(wrapperRef);
             const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;
-            const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
-            const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
+            const positionTop = wrapperHeight + wrapperYPosition + windowYScroll + yOffset - yModifier;
+            const positionBottom = windowHeightMinusYOffset - wrapperYPosition + yOffset;
+            const positionLeft = wrapperXPosition - xModifier;
+            let topPositionValue = '';
+            let bottomPositionValue = '';
+            let leftPositionValue = '';
+            const leftPositionStickedToRightBorderValue = wrapperXPosition + wrapperWidth - contentWidth;
+            const setTopPosition = () => {
+                topPositionValue = 'auto';
+                bottomPositionValue = `${positionBottom}px`;
+            };
+            const setBottomPosition = () => {
+                topPositionValue = `${positionTop}px`;
+                bottomPositionValue = 'auto';
+            };
+            horizontalPosition === 'left'
+                ? (leftPositionValue = `${positionLeft}px`)
+                : (leftPositionValue = `${leftPositionStickedToRightBorderValue}px`);
+            if (verticalPosition === 'top') {
+                setTopPosition();
+                if (dropdownIsOutsideTopViewport)
+                    setBottomPosition();
+            }
+            if (verticalPosition === 'bottom') {
+                setBottomPosition();
+                if (dropdownIsOutsideBottomViewport)
+                    setTopPosition();
+            }
             screenWidthName === SCREEN_XS
-                ? setStyles({ left: `0px`, top: `0px`, bottom: 'auto', zIndex })
-                : setStyles({ left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex });
+                ? setStyles({ top: `0px`, bottom: 'auto', left: `0px`, zIndex })
+                : setStyles({ top: topPositionValue, bottom: bottomPositionValue, left: leftPositionValue, zIndex });
         }
-    }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideBottomViewport]);
+    }, [
+        portalContainer,
+        screenWidthName,
+        wrapperRef,
+        isOpen,
+        dropdownIsOutsideTopViewport,
+        dropdownIsOutsideBottomViewport,
+        windowYScroll,
+        windowHeightMinusYOffset
+    ]);
     useEffect(() => {
         var _a;
         if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
             return;
         const scrollableParent = (_a = UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
         const handleWindowScroll = () => {
-            if (typeof closeDropdown === 'function') {
-                closeDropdown();
+            if (typeof toggleDropdown === 'function') {
+                toggleDropdown();
             }
         };
         scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
@@ -86,12 +130,12 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
             enter: cssClasses['dropdown-enter'],
             enterActive: cssClasses['dropdown-enter-active'],
             exit: cssClasses['dropdown-exit'],
-            exitActive: cssClasses['dropdown-exit-active']
+            exitActive: verticalPosition === 'top' ? cssClasses['dropdown-exit-active'] : cssClasses['dropdown-exit-active-reversed']
         } },
         React.createElement("div", { ref: contentRef, style: styles, className: contentClassName },
             React.createElement("div", { className: cssClasses[cssDropdownHeader] },
                 React.createElement("div", { onClick: () => typeof toggleDropdown === 'function' && toggleDropdown() }, headerComponent !== null && headerComponent !== void 0 ? headerComponent : (React.createElement("div", { className: cssClasses[cssDropdownHeaderContent] },
-                    headerGoBackIcon || React.createElement(IconArrow, { className: cssClasses$1['icon_rotate-180'] }),
+                    headerGoBackIcon || React.createElement(IconArrow, { className: cssClasses$3['icon_rotate-180'] }),
                     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);
 };

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;"}
+{"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;"}

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
-import ControlCheckbox from '../../controls/hoc/control_checkbox/index.js';
 import { cssDropdownListItem, cssDropdownListItemSelected, cssDropdownListItemDisabled, cssDropdownListItemReadonly } from '../css_classes.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
 import Item from './item.js';
+import ControlCheckbox from '../../controls/hoc/control_checkbox/index.js';
 
 /**
  * Dropdown.OptionMultiple component. Should be only used within Dropdown.List

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

@@ -2,10 +2,10 @@ import React, { useRef } from 'react';
 import { useDropdownContext } from '../context/index.js';
 import { cssControlInputRemoveButton } from '../../controls/css_classes.js';
 import inputCssClasses from '../../../css/input/main.module.less.js';
-import InputWrapper from '../../controls/components/input_wrapper.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
 import { useKeyboardOpenClose } from '../hooks/use_keyboard_open_close.js';
 import IconClose from '../../../assets/icon_close.js';
+import InputWrapper from '../../controls/components/input_wrapper.js';
 
 /**
  * Dropdown.Select component. Displays select like control. Use it only if you have selectable values.

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

@@ -1,5 +1,7 @@
 export declare const cssDropdown = "dropdown";
 export declare const cssDropdownContent: string;
+export declare const cssDropdownContentOnTop: string;
+export declare const cssDropdownContentOnBottom: string;
 export declare const cssDropdownArrowHorizontalDirectionRight: string;
 export declare const cssDropdownArrowVerticalDirectionBottom: string;
 export declare const cssDropdownHeader: string;

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

@@ -1,7 +1,9 @@
 const cssDropdown = 'dropdown';
 const cssDropdownContent = `${cssDropdown}__content`;
-const cssDropdownArrowHorizontalDirectionRight = `${cssDropdownContent}_right`;
-const cssDropdownArrowVerticalDirectionBottom = `${cssDropdownContent}_bottom`;
+const cssDropdownContentOnTop = `${cssDropdownContent}_top`;
+const cssDropdownContentOnBottom = `${cssDropdownContent}_bottom`;
+const cssDropdownArrowHorizontalDirectionRight = `${cssDropdownContent}_arrow-right`;
+const cssDropdownArrowVerticalDirectionBottom = `${cssDropdownContent}_arrow-bottom`;
 const cssDropdownHeader = `${cssDropdown}__header`;
 const cssDropdownHeaderTitle = `${cssDropdown}__header-title`;
 const cssDropdownHeaderContent = `${cssDropdown}__header-content`;
@@ -16,5 +18,5 @@ const cssDropdownListItemSelected = `${cssDropdown}__list-item_selected`;
 const cssDropdownListItemDisabled = `${cssDropdown}__list-item_disabled`;
 const cssDropdownListItemReadonly = `${cssDropdown}__list-item_readonly`;
 
-export { cssDropdown, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownContent, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownItemWithHover, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
+export { cssDropdown, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownContent, cssDropdownContentOnBottom, cssDropdownContentOnTop, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownItemWithHover, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
 //# sourceMappingURL=css_classes.js.map

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

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

@@ -44,6 +44,9 @@ export interface IDropdownContentProps {
     headerGoBackIcon?: JSX.Element;
     portalContainer?: RefObject<HTMLElement>;
     arrowSide?: 'left' | 'right';
+    horizontalPosition?: 'left' | 'right';
+    verticalPosition?: 'top' | 'bottom';
+    cssClass?: string;
 }
 export interface IDropdownItemWithHover {
     children?: ReactNode;

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

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
 import { ISelectOption } from './types';
+import { RefObject } from 'react';
 /**
  * checks if the given option is selected within array of selectedValues array
  * @param {ISelectOption} option select/multiselect option
@@ -30,3 +30,4 @@ export declare const getXYModifiersForNestedDropdowns: (portalContainer: HTMLEle
     yModifier: number;
 };
 export declare const isChildOfModal: (ref: RefObject<HTMLElement>) => boolean;
+export declare const getBounding: (element: HTMLElement) => DOMRect;

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

@@ -1,8 +1,8 @@
 import 'react';
 import cssClasses$1 from '../../css/modal/main.module.less.js';
 import { cssDropdownContent } from './css_classes.js';
-import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
 import cssClasses from '../../css/dropdown/main.module.less.js';
+import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
 
 /**
  * checks if the given option is selected within array of selectedValues array
@@ -65,7 +65,10 @@ const isChildOfModal = (ref) => {
         currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;
     }
     return false;
+};
+const getBounding = (element) => {
+    return element.getBoundingClientRect();
 };
 
-export { getXYModifiersForNestedDropdowns, handleItemClick, handleSearchKeyUp, isChildOfModal, isSelected };
+export { getBounding, getXYModifiersForNestedDropdowns, handleItemClick, handleSearchKeyUp, isChildOfModal, isSelected };
 //# sourceMappingURL=utilities.js.map

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

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

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

@@ -0,0 +1,8 @@
+export declare const FILE_PICKER_ERROR: {
+    invalidFileFormat: string;
+    invalidInputWidth: string;
+};
+export declare const JPG_EXTENSION = "jpg";
+export declare const JPEG_EXTENSION = "jpeg";
+export declare const SVG_MIME_TYPE = "svg+xml";
+export declare const SVG_EXTENSION = "svg";

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

@@ -0,0 +1,11 @@
+const FILE_PICKER_ERROR = {
+    invalidFileFormat: 'Invalid file format',
+    invalidInputWidth: 'The value cannot be greater than the width of the uploaded file'
+};
+const JPG_EXTENSION = 'jpg';
+const JPEG_EXTENSION = 'jpeg';
+const SVG_MIME_TYPE = 'svg+xml';
+const SVG_EXTENSION = 'svg';
+
+export { FILE_PICKER_ERROR, JPEG_EXTENSION, JPG_EXTENSION, SVG_EXTENSION, SVG_MIME_TYPE };
+//# sourceMappingURL=constants.js.map

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

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

@@ -33,10 +33,13 @@ export interface IUseFilePicker {
     onFileDelete: () => void;
     onPreviewError: () => void;
     file: TFilePickerFile | undefined;
+    errors?: string[];
     isPreview: boolean;
     isDragOver: boolean;
+    isVectorImage?: boolean;
 }
 export interface IUseFilePickerProps {
     onChange?: (fileList: FileList | null) => void;
     initialFile?: TFilePickerFile;
+    allowedExtensions?: string[];
 }

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

@@ -1,2 +1,2 @@
 import { IUseFilePicker, IUseFilePickerProps } from "./types";
-export declare const useFilePicker: ({ onChange, initialFile }: IUseFilePickerProps) => IUseFilePicker;
+export declare const useFilePicker: ({ onChange, initialFile, allowedExtensions }: IUseFilePickerProps) => IUseFilePicker;

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

@@ -1,9 +1,12 @@
 import { useState, useEffect } from 'react';
+import { FILE_PICKER_ERROR, JPG_EXTENSION, JPEG_EXTENSION, SVG_MIME_TYPE, SVG_EXTENSION } from './constants.js';
 
-const useFilePicker = ({ onChange, initialFile }) => {
+const useFilePicker = ({ onChange, initialFile, allowedExtensions }) => {
     const [file, setFile] = useState(initialFile);
+    const [errors, setErrors] = useState([]);
     const [isDragOver, setDragOver] = useState(false);
     const [isPreview, setPreview] = useState(true);
+    const [isVectorImage, setIsVectorImage] = useState(false);
     useEffect(() => {
         setFile(initialFile);
     }, [initialFile]);
@@ -11,9 +14,49 @@ const useFilePicker = ({ onChange, initialFile }) => {
         event.stopPropagation();
         event.preventDefault();
         const { dataTransfer: { files } } = event;
+        setFileFormatError(checkIfFileIsInCorrectFormat(allowedExtensions, files[0].type));
+        checkIfImageIsVector(files[0].type);
         setDragOver(false);
         updateFile(files);
     };
+    const checkIfFileIsInCorrectFormat = (allowedExtensions, fileType) => {
+        if (!allowedExtensions)
+            return;
+        const fileExtension = getFileExtension(fileType);
+        let formatIsCorrect;
+        if (Array.isArray(fileExtension)) {
+            formatIsCorrect = allowedExtensions.some((extension) => fileExtension.includes(extension.toLowerCase()));
+        }
+        else {
+            formatIsCorrect = allowedExtensions === null || allowedExtensions === void 0 ? void 0 : allowedExtensions.some((extension) => {
+                return extension.toLowerCase() === fileExtension.toLowerCase();
+            });
+        }
+        return formatIsCorrect;
+    };
+    const setFileFormatError = (isFileFormatCorrect) => {
+        if (!isFileFormatCorrect) {
+            setErrors([...errors, FILE_PICKER_ERROR.invalidFileFormat]);
+        }
+        else {
+            setErrors([]);
+        }
+    };
+    const getFileExtension = (fileType) => {
+        const substringIndex = fileType.lastIndexOf('/');
+        const fileExtension = fileType.substring(substringIndex + 1);
+        if (fileExtension === JPG_EXTENSION || fileExtension === JPEG_EXTENSION) {
+            return [JPG_EXTENSION, JPEG_EXTENSION];
+        }
+        else if (fileExtension === SVG_MIME_TYPE) {
+            return SVG_EXTENSION;
+        }
+        return fileExtension;
+    };
+    const checkIfImageIsVector = (fileType) => {
+        const fileExtenstion = getFileExtension(fileType);
+        fileExtenstion === 'svg' ? setIsVectorImage(true) : setIsVectorImage(false);
+    };
     const onFileChange = ({ target: { files } }) => {
         updateFile(files);
     };
@@ -23,6 +66,8 @@ const useFilePicker = ({ onChange, initialFile }) => {
                 fileName: files === null || files === void 0 ? void 0 : files[0].name,
                 fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
             });
+            setFileFormatError(checkIfFileIsInCorrectFormat(allowedExtensions, files[0].type));
+            checkIfImageIsVector(files[0].type);
         }
         else {
             setFile(undefined);
@@ -44,6 +89,7 @@ const useFilePicker = ({ onChange, initialFile }) => {
     const onFileDelete = () => {
         setFile(undefined);
         setPreview(true);
+        setErrors([]);
         onChange === null || onChange === void 0 ? void 0 : onChange(null);
     };
     const onPreviewError = () => {
@@ -57,8 +103,10 @@ const useFilePicker = ({ onChange, initialFile }) => {
         onFileDelete,
         onPreviewError,
         file,
+        errors,
         isPreview,
-        isDragOver
+        isDragOver,
+        isVectorImage
     };
 };
 

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

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

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

@@ -1,8 +1,9 @@
 import React, { ReactElement } from 'react';
-export interface IHint {
+import { IDropdownProps } from "../dropdown/types";
+export interface IHint extends IDropdownProps {
     hint: string | ReactElement;
     vPosition?: 'top' | 'bottom';
-    hPosition?: 'left' | 'right' | 'center';
+    hPosition?: 'left' | 'right';
     spacingLeft?: boolean;
     spacingRight?: boolean;
     iconClass?: string;
@@ -10,7 +11,6 @@ export interface IHint {
     Icon?: React.FC<{
         className?: string;
     }>;
-    fixed?: boolean;
 }
 declare const Hint: React.FC<IHint>;
 export default Hint;

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

@@ -1,25 +1,29 @@
 import React, { useRef } from 'react';
+import { DropdownContext } from '../dropdown/context/index.js';
 import { classNames } from '../../utilities/styles/classNames.js';
-import styles from '../../css/hint/main.module.less.js';
+import cssClasses from '../../css/hint/main.module.less.js';
+import { useToggle } from '../dropdown/hooks/use_toggle.js';
+import Dropdown from '../dropdown/index.js';
 import IconHint from '../../assets/icon_hint.js';
-import { useFixedChildPosition } from '../../hooks/use_fixed_child_position.js';
 
-const Hint = ({ hint, fixed, vPosition = 'top', yellow, hPosition = 'right', iconClass, Icon, spacingLeft, spacingRight }) => {
-    const containerClassName = classNames([
-        'hint',
-        spacingLeft && 'hint_spacing-left',
-        spacingRight && 'hint_spacing-right',
-        hPosition === 'right' && 'hint_right',
-        hPosition === 'center' && 'hint_horizontal-center',
-        vPosition === 'top' && 'hint_top'
-    ], styles);
-    const hintContentRef = useRef(null);
-    const { onMouseEnter, style } = useFixedChildPosition({ useFixed: fixed, vPosition, hPosition, childRef: hintContentRef });
-    const contentClassName = classNames(['hint__content', yellow && 'hint__content_yellow'], styles);
+const Hint = ({ hint, vPosition = 'top', yellow, hPosition = 'right', spacingLeft, spacingRight, iconClass, Icon, onToggle }) => {
+    const wrapperRef = useRef(null);
+    const [isOpen, toggleDropdown] = useToggle(false, onToggle);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
+    const containerClassName = classNames(['hint', spacingLeft && 'hint_spacing-left', spacingRight && 'hint_spacing-right'], cssClasses);
+    const contentClassName = classNames(['hint__content', yellow && 'hint__content_yellow'], cssClasses);
     const IconComponent = Icon || IconHint;
-    return (React.createElement("div", { className: containerClassName, onMouseEnter: onMouseEnter },
-        React.createElement(IconComponent, { className: iconClass }),
-        React.createElement("div", { ref: hintContentRef, className: contentClassName, style: style }, hint)));
+    const handleOnMouseEnter = () => {
+        toggleDropdown();
+    };
+    const handleOnMouseLeave = () => {
+        toggleDropdown();
+    };
+    return (React.createElement(DropdownContext.Provider, { value: value },
+        React.createElement("span", { className: containerClassName, ref: wrapperRef, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
+            React.createElement(IconComponent, { className: iconClass }),
+            React.createElement(Dropdown.Content, { cssClass: contentClassName, headerComponent: "", arrowSide: hPosition === 'left' ? 'right' : 'left', horizontalPosition: hPosition === 'right' ? 'left' : 'right', verticalPosition: vPosition === 'top' ? 'top' : 'bottom' },
+                React.createElement("span", null, hint)))));
 };
 
 export default Hint;

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

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

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