@dreamcommerce/aurora 2.4.2 → 2.4.3-10

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

@@ -18,11 +18,11 @@ import Select from '../../../dropdown/hoc/select/index.js';
  *  />
  * )
  */
-const ControlSelect = ({ label, isRequired, id, name, defaultValues, options, isWithGroups, isWithSearch, defaultIsOpen, defaultCloseOnClick, isReadonly, isDisabled, onChange, onToggle, errors, hint, hintOptions = { isFixed: true }, placeholder, additionalInfo, onScroll, innerAdditionalContent, hasCloseIcon, labelAdditionalInfo }) => {
+const ControlSelect = ({ label, isRequired, id, name, defaultValues, options, isWithGroups, isWithSearch, defaultIsOpen, defaultCloseOnClick, isReadonly, isDisabled, onChange, onToggle, errors, hint, placeholder, additionalInfo, onScroll, innerAdditionalContent, hasCloseIcon, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(Select, { key: name, name: name, options: options, defaultValues: defaultValues, isWithGroups: isWithGroups, isWithSearch: isWithSearch, defaultIsOpen: defaultIsOpen, defaultCloseOnClick: defaultCloseOnClick, isReadonly: isReadonly, isDisabled: isDisabled, placeholder: placeholder, onChange: onChange, onToggle: onToggle, onScroll: onScroll, innerAdditionalContent: innerAdditionalContent, hasCloseIcon: hasCloseIcon }))),

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

@@ -3,11 +3,11 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import TagsSelector from '../../../tags_selector/index.js';
 
-const ControlTagsSelector = ({ id, name, label, isRequired, placeholder, minTagLength, withList, defaultTags, defaultListTags, onChange, onListItemClick, errors, hint, hintOptions = { isFixed: true }, labelAdditionalInfo }) => {
+const ControlTagsSelector = ({ id, name, label, isRequired, placeholder, minTagLength, withList, defaultTags, defaultListTags, onChange, onListItemClick, errors, hint, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(TagsSelector, { id: id, name: name, placeholder: placeholder, minTagLength: minTagLength, withList: withList, defaultTags: defaultTags, tagsListValue: defaultListTags, onChange: onChange, onListItemClick: onListItemClick }))),

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

@@ -17,11 +17,11 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlTextarea = React.forwardRef(({ label, isRequired, id, name, value, defaultValue, placeholder, disabled, readOnly, onChange, onFocus, onBlur, onKeyPress, errors, hint, hintOptions = { isFixed: true }, labelAdditionalInfo }, ref) => {
+const ControlTextarea = React.forwardRef(({ label, isRequired, id, name, value, defaultValue, placeholder, disabled, readOnly, onChange, onFocus, onBlur, onKeyPress, errors, hint, labelAdditionalInfo }, ref) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(Control.Textarea, { id: id, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyPress: onKeyPress, ref: ref }))),

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

@@ -3,8 +3,8 @@ import { IMultiSelectProps, ISelectProps } from "../dropdown/types";
 import { IColorPickerProps } from "../color_picker/types";
 import { IFilePicker } from "../file_picker/types";
 import { IRange } from "../range/types";
-import { TVerticalPosition } from "../../typings/general";
 import React from 'react';
+import { TVerticalPosition } from "../../typings/general";
 export declare type TControlErrors = string[] | null | undefined;
 export interface IControlContext {
     errors?: TControlErrors;
@@ -33,13 +33,9 @@ export interface IControlProps {
 interface IControlCommonProps {
     errors?: TControlErrors;
     hint?: string;
-    hintOptions?: TControlHintOptions;
     isRequired?: boolean;
     additionalInfo?: string | ReactNode;
 }
-interface TControlHintOptions {
-    isFixed: boolean;
-}
 export interface IContentProps {
     children: ReactNode;
 }

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

@@ -3,6 +3,6 @@ import '@auroraComponents/dropdown/types';
 import '@auroraComponents/color_picker/types';
 import '@auroraComponents/file_picker/types';
 import '@auroraComponents/range/types';
-import '@auroraTypings/general';
 import 'react';
+import '@auroraTypings/general';
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA4F,OAAO,CAAC;AACpG,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkC,wBAAwB,CAAC;AAC3D,OAAkB,OAAO,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA4F,OAAO,CAAC;AACpG,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkB,OAAO,CAAC;AAC1B,OAAkC,wBAAwB,CAAC"}

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

@@ -1,8 +1,8 @@
 import React, { useContext, useRef } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import DatepickerContext from '../context/value_controller_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerCommonRanges } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import Select from '../../dropdown/hoc/select/index.js';
 import { getRanges } from '../utilities.js';
 
@@ -15,7 +15,7 @@ const CommonRanges = () => {
     const onChange = ({ value }) => {
         setValue(dateRanges[value]);
     };
-    return (React.createElement("div", { className: cssClasses[cssDatePickerCommonRanges], ref: ref },
+    return (React.createElement("div", { className: styles[cssDatePickerCommonRanges], ref: ref },
         React.createElement(Select, { name: "common-ranges", options: availableOptions, onChange: onChange, portalContainer: ref })));
 };
 

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

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import DatepickerContext from '../context/value_controller_context.js';
 import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerDaysGrid, cssDatePickerDaysGridRow, cssDatePickerDaysGridWeekName } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import SingleDay from './single_day.js';
 import useDateNames from '../hooks/use_date_names.js';
 
@@ -12,9 +12,9 @@ const DaysGrid = () => {
     const firstWeekDay = (new Date(year, month, 1).getDay() + 6) % 7;
     const { updateDate } = useContext(DatepickerContext);
     const { weekNameShortcuts } = useDateNames();
-    return (React.createElement("div", { className: cssClasses[cssDatePickerDaysGrid] },
-        React.createElement("div", { className: cssClasses[cssDatePickerDaysGridRow] }, weekNameShortcuts.map((weekName, index) => (React.createElement("div", { className: cssClasses[cssDatePickerDaysGridWeekName], key: `week-name-${index}` }, weekName)))),
-        React.createElement("div", { className: `${cssClasses[cssDatePickerDaysGridRow]} ${animationClassName}` },
+    return (React.createElement("div", { className: styles[cssDatePickerDaysGrid] },
+        React.createElement("div", { className: styles[cssDatePickerDaysGridRow] }, weekNameShortcuts.map((weekName, index) => (React.createElement("div", { className: styles[cssDatePickerDaysGridWeekName], key: `week-name-${index}` }, weekName)))),
+        React.createElement("div", { className: `${styles[cssDatePickerDaysGridRow]} ${animationClassName}` },
             Array.from(Array(firstWeekDay).keys()).map((_, index) => (React.createElement("div", { key: `empty-day-${index}` }))),
             Array.from(Array(daysInMonth).keys()).map((_, index) => (React.createElement(SingleDay, { date: index + 1, month: month, year: year, updateDate: updateDate, key: `day-${index}` }))))));
 };

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

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import InputWrapper from '../../controls/components/input_wrapper.js';
 import DatepickerContext from '../context/value_controller_context.js';
-import IconCalendar from '../../../assets/icon_calendar.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerLabelIcon } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
+import IconCalendar from '../../../assets/icon_calendar.js';
 
 const DatepickerLabel = ({ name }) => {
     const { readable, inputValue } = useContext(DatepickerContext);
     return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { value: readable, preElements: React.createElement(IconCalendar, { className: cssClasses[cssDatePickerLabelIcon] }) }),
+        React.createElement(InputWrapper, { value: readable, preElements: React.createElement(IconCalendar, { className: styles[cssDatePickerLabelIcon] }) }),
         React.createElement("input", { type: "hidden", name: name, value: inputValue })));
 };
 

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

@@ -1,10 +1,10 @@
 import React, { useContext, useRef } from 'react';
 import Dropdown from '../../dropdown/index.js';
-import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
-import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import { DATE_PICKER_TEST_ID } from '../constants.js';
+import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
 import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.js';
+import styles from '../../../css/date_picker/main.module.less.js';
+import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../css_classes.js';
 import useDateNames from '../hooks/use_date_names.js';
 import MonthYearPicker from './month_year_picker/index.js';
 
@@ -13,14 +13,14 @@ const MonthController = ({ month, year }) => {
     const { monthNames } = useDateNames();
     const controllerRef = useRef(null);
     useKeyboardNavigation();
-    return (React.createElement("div", { className: `${cssClasses[cssDatePickerController]}`, ref: controllerRef, "data-test-id": DATE_PICKER_TEST_ID.controller },
-        React.createElement("div", { onClick: previousMonth, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[cssDatePickerControllerArrowLeft]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowLeft }),
-        React.createElement("div", { className: cssClasses[cssDatePickerControllerTitle] },
+    return (React.createElement("div", { className: `${styles[cssDatePickerController]}`, ref: controllerRef, "data-test-id": DATE_PICKER_TEST_ID.controller },
+        React.createElement("div", { onClick: previousMonth, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowLeft]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowLeft }),
+        React.createElement("div", { className: styles[cssDatePickerControllerTitle] },
             React.createElement(Dropdown, null,
                 React.createElement(Dropdown.Label, { cssClass: animationClassName, label: `${monthNames[month]} ${year}` }),
                 React.createElement(Dropdown.Content, { portalContainer: controllerRef },
                     React.createElement(MonthYearPicker, { month: month, year: year })))),
-        React.createElement("div", { onClick: nextMonth, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[cssDatePickerControllerArrowRight]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowRight })));
+        React.createElement("div", { onClick: nextMonth, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowRight]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowRight })));
 };
 
 export default MonthController;

package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_view.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { DropdownContext } from '../../../../dropdown/context/index.js';
+import { MONTHS_IN_YEAR } from '../../../constants.js';
 import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
+import styles from '../../../../../css/date_picker/main.module.less.js';
 import { cssDatePickerMonthTable, cssDatePickerMonthTableItem, cssDatePickerMonthTableItemSelected } from '../../../css_classes.js';
-import cssClasses from '../../../../../css/date_picker/main.module.less.js';
-import { MONTHS_IN_YEAR } from '../../../constants.js';
 import useDateNames from '../../../hooks/use_date_names.js';
 
 const MonthView = () => {
@@ -14,7 +14,7 @@ const MonthView = () => {
         setMonth(monthIndex);
         toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
     };
-    return (React.createElement("div", { className: cssClasses[cssDatePickerMonthTable] }, Array.from(Array(MONTHS_IN_YEAR).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onMonthClick(index), className: `${cssClasses[cssDatePickerMonthTableItem]} ${index === month ? cssClasses[cssDatePickerMonthTableItemSelected] : ''}` }, monthNameShortcuts[index])))));
+    return (React.createElement("div", { className: styles[cssDatePickerMonthTable] }, Array.from(Array(MONTHS_IN_YEAR).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onMonthClick(index), className: `${styles[cssDatePickerMonthTableItem]} ${index === month ? styles[cssDatePickerMonthTableItemSelected] : ''}` }, monthNameShortcuts[index])))));
 };
 
 export default MonthView;

package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_year_controller.js

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
+import styles from '../../../../../css/date_picker/main.module.less.js';
 import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../../../css_classes.js';
-import cssClasses from '../../../../../css/date_picker/main.module.less.js';
 import { MonthYearPickerContext } from '../context.js';
 
 const MonthYearPickerController = () => {
     const { onArrowLeft, onArrowRight, monthPickerTitle, toggleView } = useContext(MonthYearPickerContext);
-    return (React.createElement("div", { className: cssClasses[cssDatePickerController] },
-        React.createElement("div", { "data-test-id": "month-year-left-arrow", onClick: onArrowLeft, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[cssDatePickerControllerArrowLeft]}` }),
-        React.createElement("div", { onClick: toggleView, className: cssClasses[cssDatePickerControllerTitle] }, monthPickerTitle),
-        React.createElement("div", { "data-test-id": "month-year-right-arrow", onClick: onArrowRight, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[cssDatePickerControllerArrowRight]}` })));
+    return (React.createElement("div", { className: styles[cssDatePickerController] },
+        React.createElement("div", { "data-test-id": "month-year-left-arrow", onClick: onArrowLeft, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowLeft]}` }),
+        React.createElement("div", { onClick: toggleView, className: styles[cssDatePickerControllerTitle] }, monthPickerTitle),
+        React.createElement("div", { "data-test-id": "month-year-right-arrow", onClick: onArrowRight, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowRight]}` })));
 };
 
 export default MonthYearPickerController;

package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_year_picker_context_manager.js

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
-import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
 import { YEARS_IN_VIEW } from '../../../constants.js';
+import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
 import { MonthYearPickerContext } from '../context.js';
 import { MONTH_VIEW, YEARS_VIEW } from '../constants.js';
 

package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/years_view.js

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
+import { YEARS_IN_VIEW } from '../../../constants.js';
 import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
+import styles from '../../../../../css/date_picker/main.module.less.js';
 import { cssDatePickerMonthTable, cssDatePickerMonthTableItem, cssDatePickerMonthTableItemSelected } from '../../../css_classes.js';
-import cssClasses from '../../../../../css/date_picker/main.module.less.js';
-import { YEARS_IN_VIEW } from '../../../constants.js';
 import { MonthYearPickerContext } from '../context.js';
 import { MONTH_VIEW } from '../constants.js';
 
@@ -13,7 +13,7 @@ const YearView = () => {
         setYear(yearRange + yearIndex);
         setView(MONTH_VIEW);
     };
-    return (React.createElement("div", { className: cssClasses[cssDatePickerMonthTable] }, Array.from(Array(YEARS_IN_VIEW).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onYearClick(index), className: `${cssClasses[cssDatePickerMonthTableItem]} ${yearRange + index === year ? cssClasses[cssDatePickerMonthTableItemSelected] : ''}` }, yearRange + index)))));
+    return (React.createElement("div", { className: styles[cssDatePickerMonthTable] }, Array.from(Array(YEARS_IN_VIEW).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onYearClick(index), className: `${styles[cssDatePickerMonthTableItem]} ${yearRange + index === year ? styles[cssDatePickerMonthTableItemSelected] : ''}` }, yearRange + index)))));
 };
 
 export default YearView;

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,21 @@
 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$2 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';
 
 /**
  * Dropdown.Content component. This togglable part of dropdown.
@@ -22,27 +23,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 [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(cssClass, cssClasses[cssDropdownContent], contentShouldAppearOnTop && cssClasses$1[cssDropdownContentOnTop], contentShouldAppearOnBottom && cssClasses$1[cssDropdownContentOnBottom], arrowSide === 'right' && cssClasses[cssDropdownArrowHorizontalDirectionRight], contentShouldAppearOnTop && cssClasses[cssDropdownArrowVerticalDirectionBottom]);
     const screenWidthName = useScreenDetect();
     const refs = [contentRef];
     if (wrapperRef) {
@@ -54,22 +64,55 @@ 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)
@@ -91,7 +134,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
         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$2['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;"}

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;