@dreamcommerce/aurora 2.4.2-1 → 2.4.3-1

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

@@ -15,12 +15,12 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlCheckboxSwitch = ({ id, label, name, hint, hintOptions = { isFixed: true }, value, initiallyChecked, disabled, onChange, errors, labelAdditionalInfo }) => {
+const ControlCheckboxSwitch = ({ id, label, name, hint, hintOptions = { isFixed: true }, value, initiallyChecked, disabled, onChange, errors }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, { type: "checkbox" },
                 React.createElement(Control.CheckboxSwitch, { id: id, name: name, value: value, initiallyChecked: initiallyChecked, disabled: disabled, onChange: onChange }),
-                React.createElement(Label, { htmlFor: id, additionalInfo: labelAdditionalInfo },
+                React.createElement(Label, { htmlFor: id },
                     label,
                     hint && React.createElement(Hint, { fixed: hintOptions.isFixed, hint: hint, spacingLeft: true })))),
         React.createElement(Control.Errors, null)));

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

@@ -20,13 +20,13 @@ import Dropdown from '../../../dropdown/index.js';
  *  />
  * )
  */
-const ControlColorPicker = ({ initialColor = '#FFFFFF', name, isRequired, label, id, onChange, hideChooseCancelButtons, errors, hint, hintOptions = { isFixed: true }, labelAdditionalInfo }) => {
+const ControlColorPicker = ({ initialColor = '#FFFFFF', name, isRequired, label, id, onChange, hideChooseCancelButtons, errors, hint, hintOptions = { isFixed: true } }) => {
     const colorPickerContext = useColorPicker({ initialColorHex: initialColor, onChange });
     return (React.createElement(ColorPickerContext.Provider, { value: colorPickerContext },
         React.createElement(Dropdown, null,
             React.createElement(Dropdown.CustomLabel, null,
                 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(Control.Label, { id: id, isRequired: isRequired },
                         label,
                         hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
                     React.createElement(Control.Content, null,

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

@@ -25,7 +25,7 @@ const DatepickerViews = {
  *  />
  * )
  */
-const ControlDatepicker = ({ onChange, label, name, isRequired, id = 'datepicker-id', type = 'single', defaultDate, defaultRange, maxDate, minDate, maxRange, minRange, className, showDefaultRanges = true, showButtons = true, errors, hint, labelAdditionalInfo }) => {
+const ControlDatepicker = ({ onChange, label, name, isRequired, id = 'datepicker-id', type = 'single', defaultDate, defaultRange, maxDate, minDate, maxRange, minRange, className, showDefaultRanges = true, showButtons = true, errors, hint }) => {
     const valueController = useValueController({
         type,
         defaultDate,
@@ -44,7 +44,7 @@ const ControlDatepicker = ({ onChange, label, name, isRequired, id = 'datepicker
     return (React.createElement(DatepickerContext.Provider, { value: valueController },
         React.createElement(Dropdown.CustomLabel, null,
             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(Control.Label, { id: id, isRequired: isRequired },
                     label,
                     hint && React.createElement(Hint, { fixed: true, spacingLeft: true, hint: hint }))),
                 React.createElement(Control.Content, null,

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

@@ -3,9 +3,9 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import FilePicker from '../../../file_picker/index.js';
 
-const ControlFilePicker = ({ label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, hintOptions = { isFixed: true }, labelAdditionalInfo }) => {
+const ControlFilePicker = ({ label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, hintOptions = { isFixed: true } }) => {
     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(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,

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

@@ -17,11 +17,12 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlInput = ({ label, isRequired, id, name, value, placeholder, prefix, postfix, disabled, onChange, onKeyPress, onKeyUp, hint, hintOptions = { isFixed: true }, errors, labelAdditionalInfo, additionalInfo, ...props }) => {
+const ControlInput = ({ label, isRequired, id, name, value, placeholder, prefix, postfix, disabled, onChange, onKeyPress, onKeyUp, hint, hintOptions = { isFixed: true }, errors, helper, additionalInfo, ...props }) => {
     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(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+        helper && React.createElement(Control.Helper, { hasError: !!(errors === null || errors === void 0 ? void 0 : errors.length) }, helper),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, { prefix: prefix, postfix: postfix },
                 React.createElement(Control.Input, { id: id, name: name, value: value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyPress: onKeyPress, onKeyUp: onKeyUp, ...props }))),

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

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

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

@@ -3,9 +3,9 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import Multiple from '../../../dropdown/hoc/multiselect/index.js';
 
-const ControlMultiSelect = ({ label, isRequired, id, name, defaultValues, options, isWithGroups, isWithSearch, defaultIsOpen, defaultCloseOnClick, isReadonly, isDisabled, onChange, onToggle, errors, hint, hintOptions = { isFixed: true }, hasCloseIcon, labelAdditionalInfo }) => {
+const ControlMultiSelect = ({ label, isRequired, id, name, defaultValues, options, isWithGroups, isWithSearch, defaultIsOpen, defaultCloseOnClick, isReadonly, isDisabled, onChange, onToggle, errors, hint, hintOptions = { isFixed: true }, hasCloseIcon }) => {
     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(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,

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

@@ -16,15 +16,16 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlRadio = ({ id, label, hint, hintOptions = { isFixed: true }, name, value, defaultChecked, checked, disabled, onClick, errors, labelAdditionalInfo }) => {
+const ControlRadio = ({ id, label, hint, hintOptions = { isFixed: true }, name, value, defaultChecked, checked, disabled, onClick, errors, additionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         React.createElement(Control.Content, null,
-            React.createElement(Control.Element, { type: "radio", verticalPosition: labelAdditionalInfo ? VERTICAL_POSITION.top : undefined },
+            React.createElement(Control.Element, { type: "radio", verticalPosition: additionalInfo ? VERTICAL_POSITION.top : undefined },
                 React.createElement(Control.Radio, { id: id, name: name, value: value, defaultChecked: defaultChecked, checked: checked, disabled: disabled, onClick: onClick }),
-                React.createElement(Label, { additionalInfo: labelAdditionalInfo, htmlFor: id },
+                React.createElement(Label, { htmlFor: id },
                     label,
                     " ",
-                    hint && React.createElement(Hint, { fixed: hintOptions.isFixed, hint: hint, spacingLeft: true })))),
+                    hint && React.createElement(Hint, { fixed: hintOptions.isFixed, hint: hint, spacingLeft: true }),
+                    additionalInfo && React.createElement(Control.AdditionalInfo, null, additionalInfo)))),
         React.createElement(Control.Errors, null)));
 };
 

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

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

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

@@ -3,9 +3,9 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import ControlRadio from '../control_radio/index.js';
 
-const ControlRadioGroup = ({ id, name, onClick, checkedValue, defaultCheckedValue, label, hint, hintOptions = { isFixed: true }, options, errors, isRequired, labelAdditionalInfo }) => {
+const ControlRadioGroup = ({ id, name, onClick, checkedValue, defaultCheckedValue, label, hint, hintOptions = { isFixed: true }, options, errors, isRequired }) => {
     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(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         options.map(({ value, label, hint, disabled }) => (React.createElement(ControlRadio, { key: `RadioGroup${id}-RadioElement-${value}`, label: label, id: `RadioGroup${id}-Radio-${value}`, value: value, hint: hint, disabled: disabled, name: name, defaultChecked: defaultCheckedValue ? defaultCheckedValue === value : undefined, checked: checkedValue ? checkedValue === value : undefined, onClick: onClick }))),

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

@@ -3,9 +3,9 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import Range from '../../../range/index.js';
 
-const ControlRange = ({ label, hint, hintOptions = { isFixed: true }, isRequired, id, name, isDisabled, onChange, initialValue, step, max, min, errors, labelAdditionalInfo }) => {
+const ControlRange = ({ label, hint, hintOptions = { isFixed: true }, isRequired, id, name, isDisabled, onChange, initialValue, step, max, min, errors }) => {
     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(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,

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

@@ -18,9 +18,9 @@ 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, hintOptions = { isFixed: true }, placeholder, additionalInfo, onScroll, innerAdditionalContent, hasCloseIcon }) => {
     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(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,

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

@@ -3,9 +3,9 @@ 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, hintOptions = { isFixed: true } }) => {
     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(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,

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

@@ -17,11 +17,12 @@ 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, hintOptions = { isFixed: true }, helper }, 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(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+        helper && React.createElement(Control.Helper, { hasError: !!(errors === null || errors === void 0 ? void 0 : errors.length) }, helper),
         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/hoc/control_textarea/index.js.map

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

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { cssControls, cssControlsError } from './css_classes.js';
 import { ControlContext } from './context.js';
-import cssStyles from '../../css/controls/main.module.less.js';
 import Input from './components/input.js';
+import cssStyles from '../../css/controls/main.module.less.js';
 import { AdditionalInfo } from './components/additional_info.js';
 import Checkbox from './components/checkbox.js';
 import CheckboxSwitch from './components/checkbox_switch.js';
@@ -10,12 +10,13 @@ import Content from './components/content.js';
 import ControlLabel from './components/label.js';
 import Element from './components/element.js';
 import Errors from './components/errors.js';
+import Helper from './components/helper.js';
 import Radio from './components/radio.js';
 import Textarea from './components/textarea.js';
 
-const Control = ({ children, errors, name, id, onClick }) => {
+const Control = ({ children, errors, name, id }) => {
     return (React.createElement(ControlContext.Provider, { value: { errors, name, id } },
-        React.createElement("div", { onClick: onClick, className: `${cssStyles[cssControls]} ${errors ? cssStyles[cssControlsError] : ''}` }, children)));
+        React.createElement("div", { className: `${cssStyles[cssControls]} ${errors ? cssStyles[cssControlsError] : ''}` }, children)));
 };
 Control.Label = ControlLabel;
 Control.Input = Input;
@@ -26,7 +27,8 @@ Control.Content = Content;
 Control.Element = Element;
 Control.Textarea = Textarea;
 Control.Errors = Errors;
-Control.AdditionalInfo = AdditionalInfo;
+Control.AdditionalInfo = AdditionalInfo;
+Control.Helper = Helper;
 
 export default Control;
 //# sourceMappingURL=index.js.map

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

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

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

@@ -4,7 +4,6 @@ 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';
 export declare type TControlErrors = string[] | null | undefined;
 export interface IControlContext {
     errors?: TControlErrors;
@@ -22,13 +21,13 @@ export interface IControlComposition {
     Textarea: React.FC<ITextareaProps>;
     Errors: React.FC;
     AdditionalInfo: React.FC;
+    Helper: React.FC<IControlHelperProps>;
 }
 export interface IControlProps {
     children: ReactNode;
     errors?: TControlErrors;
     name?: string;
     id?: string;
-    onClick?: (event: React.MouseEvent) => void;
 }
 interface IControlCommonProps {
     errors?: TControlErrors;
@@ -54,7 +53,6 @@ export interface IControlTagsSelectorProps extends IControlCommonProps {
     id?: string;
     name?: string;
     label?: string;
-    labelAdditionalInfo?: string | ReactNode;
     isRequired?: boolean;
     placeholder?: string;
     minTagLength?: number;
@@ -93,7 +91,6 @@ export interface IControlLabelProps {
     id?: string;
     isRequired?: boolean;
     children: any;
-    additionalInfo?: string | ReactNode;
 }
 export interface ICheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     id?: string;
@@ -105,11 +102,14 @@ export interface IControlInputProps extends IInputProps, IControlCommonProps {
     postfix?: string;
     label?: string;
     isRequired?: boolean;
-    labelAdditionalInfo?: string | ReactNode;
+    helper?: React.ReactNode;
 }
 export interface IControlCheckboxProps extends ICheckboxProps, IControlCommonProps {
     label: string;
-    labelAdditionalInfo?: string | ReactNode;
+    helper?: React.ReactNode;
+    hintTopOptions?: TControlHintOptions;
+    labelTop?: string;
+    hintTop?: string;
 }
 export interface IRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
@@ -117,7 +117,6 @@ export interface IRadioProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 export interface IControlRadioProps extends IRadioProps, IControlCommonProps {
     label: string;
-    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlRadioGroupOption {
     value: string;
@@ -133,7 +132,6 @@ export interface IControlRadioGroup extends IControlCommonProps {
     id: string;
     name: string;
     label: string;
-    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlColorPickerProps extends IColorPickerProps, IControlCommonProps {
     id: string;
@@ -141,37 +139,32 @@ export interface IControlColorPickerProps extends IColorPickerProps, IControlCom
     label?: string;
     isRequired?: boolean;
     hideChooseCancelButtons?: boolean;
-    labelAdditionalInfo?: string | React.ReactNode;
 }
 export interface IControlTextareaProps extends ITextareaProps, IControlCommonProps {
     label?: string;
     isRequired?: boolean;
-    labelAdditionalInfo?: string | ReactNode;
+    helper?: React.ReactNode;
 }
 export interface IControlSelectProps extends ISelectProps, IControlCommonProps {
     id?: string;
     label?: string;
     isRequired?: boolean;
-    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlMultiSelectProps extends IMultiSelectProps, IControlCommonProps {
     id?: string;
     label?: string;
     isRequired?: boolean;
-    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlRange extends IRange, IControlCommonProps {
     id?: string;
     label?: string;
     isRequired?: boolean;
     name?: string;
-    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlFilePicker extends IFilePicker, IControlCommonProps {
     label?: string;
     isRequired?: boolean;
     name?: string;
-    labelAdditionalInfo?: string | ReactNode;
 }
 export interface ICellSelector {
     rows?: number;
@@ -186,6 +179,8 @@ export interface IControlCellSelector extends ICellSelector, IControlCommonProps
     label?: string;
     id?: string;
     isRequired?: boolean;
-    labelAdditionalInfo?: string | ReactNode;
+}
+export interface IControlHelperProps {
+    hasError?: boolean;
 }
 export {};

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

@@ -4,5 +4,4 @@ import '@auroraComponents/color_picker/types';
 import '@auroraComponents/file_picker/types';
 import '@auroraComponents/range/types';
 import '@auroraTypings/general';
-import 'react';
 //# 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,OAAkC,wBAAwB,CAAC"}

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

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { TControlErrors } from "../controls/types";
 export interface IMonthYear {
     month: number;
@@ -70,7 +70,6 @@ export interface IDatepickerProps {
     showButtons?: boolean;
     hint?: string;
     errors?: TControlErrors;
-    labelAdditionalInfo?: string | React.ReactNode;
 }
 export interface IDatepickerLabelProps {
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/date_picker/types.ts"],"names":[],"mappings":"AAAA,OAAgD,OAAO,CAAC;AACxD,OAA+B,kCAAkC,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/date_picker/types.ts"],"names":[],"mappings":"AAAA,OAAyC,OAAO,CAAC;AACjD,OAA+B,kCAAkC,CAAC"}

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

@@ -14,7 +14,6 @@ import cssClasses from '../../../css/dropdown/main.module.less.js';
 import { 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';
 
 /**
  * Dropdown.Content component. This togglable part of dropdown.
@@ -22,26 +21,38 @@ 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', wrapperWidth, 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 = contentRef.current.getBoundingClientRect();
+        return bounding.top <= 0;
     };
-    const dropdownIsOutsideBottomViewport = contentRef.current && checkIfIsOutsideBottomViewport(contentRef.current);
+    const checkIfIsOutsideBottomViewport = () => {
+        if (!contentRef.current)
+            return;
+        const element = contentRef.current;
+        const elementHeight = element.getBoundingClientRect().height;
+        return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
+    };
+    const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
+    const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
     const contentClassName = classNames([
         cssDropdownContent,
         arrowSide === 'right' && cssDropdownArrowHorizontalDirectionRight,
-        dropdownIsOutsideBottomViewport && cssDropdownArrowVerticalDirectionBottom
+        dropdownIsOutsideBottomViewport && cssDropdownArrowVerticalDirectionBottom,
+        cssClass
     ], cssClasses);
     const screenWidthName = useScreenDetect();
     const refs = [contentRef];
@@ -54,34 +65,50 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
         }
     });
     useEffect(() => {
-        if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
+        if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && contentRef.current) {
             const { x, y, height } = wrapperRef.current.getBoundingClientRect();
+            const { width: contentWidth } = contentRef.current.getBoundingClientRect();
             const yOffset = 10;
             const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
-            const positionTop = height + y + yOffset - yModifier;
+            const positionTop = height + y + windowYScroll + yOffset - yModifier;
             const positionBottom = windowHeightMinusYOffset - y + yOffset;
             const positionLeft = x - xModifier;
             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';
+            let topPositionValue = '';
+            let bottomPositionValue = '';
+            let leftPositionValue = '';
+            let leftPositionStickedToRightBorderValue;
+            if (horizontalPosition === 'right' && !wrapperWidth) {
+                throw new Error(`To use horizontal right position you must set "wrapperWidth" value`);
+            }
+            if (wrapperWidth) {
+                leftPositionStickedToRightBorderValue = x + wrapperWidth - contentWidth;
+            }
+            horizontalPosition === 'left'
+                ? (leftPositionValue = `${positionLeft}px`)
+                : (leftPositionValue = `${leftPositionStickedToRightBorderValue}px`);
+            if (verticalPosition === 'top') {
+                topPositionValue = 'auto';
+                bottomPositionValue = `${positionBottom}px`;
+                if (dropdownIsOutsideTopViewport) {
+                    topPositionValue = `${positionTop}px`;
+                    bottomPositionValue = 'auto';
+                }
+            }
+            if (verticalPosition === 'bottom') {
+                topPositionValue = `${positionTop}px`;
+                bottomPositionValue = 'auto';
+                if (dropdownIsOutsideBottomViewport) {
+                    topPositionValue = 'auto';
+                    bottomPositionValue = `${positionBottom}px`;
+                }
+            }
             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]);
-    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();
-            }
-        };
-        scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
-    }, [isOpen]);
+    }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideTopViewport, dropdownIsOutsideBottomViewport, wrapperWidth]);
     return createPortal(React.createElement(TransitionGroup, { component: null }, isOpen === true ? (React.createElement(CSSTransition, { timeout: 200, classNames: {
             enter: cssClasses['dropdown-enter'],
             enterActive: cssClasses['dropdown-enter-active'],

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

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

@@ -3,6 +3,4 @@ export interface IDropdownContext {
     wrapperRef?: React.RefObject<HTMLDivElement>;
     isOpen?: boolean;
     toggleDropdown?: () => void;
-    openDropdown?: () => void;
-    closeDropdown?: () => void;
 }

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

@@ -79,7 +79,7 @@ onChange, hasCloseIcon }) => {
     /**
      * isOpen provides state if dropdown is open(visible), toggleDropdown is a function which toggles dropdown content
      */
-    const [isOpen, toggleDropdown, openDropdown, closeDropdown] = useToggle(defaultIsOpen, onToggle);
+    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);
     /**
      * hook with option list state, and method to change option list
      */
@@ -91,7 +91,7 @@ onChange, hasCloseIcon }) => {
     /**
      * context values, they may be used with useContext in any component which is part of Dropdown composition
      */
-    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown, openDropdown, closeDropdown }), [isOpen, toggleDropdown, openDropdown, closeDropdown]);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
     /**
      * hook which resets options list to default on close if select has search and it was used
      */

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

@@ -4,4 +4,4 @@
  * @param onToggleCb callback onToggle
  * @returns {Array} tuple - open state and and method to change open state
  */
-export declare function useToggle(defaultIsOpen?: boolean, onToggleCb?: (isOpen: boolean) => void): [boolean, () => void, () => void, () => void];
+export declare function useToggle(defaultIsOpen?: boolean, onToggleCb?: (isOpen: boolean) => void): [boolean, () => void];

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

@@ -10,14 +10,12 @@ import { useEffectAfterMount } from '../../../hooks/use_effect_after_mount.js';
 function useToggle(defaultIsOpen = false, onToggleCb) {
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
     const onToggle = useCallback(() => setIsOpen((oldIsOpen) => !oldIsOpen), []);
-    const open = useCallback(() => setIsOpen(true), []);
-    const close = useCallback(() => setIsOpen(false), []);
     useEffectAfterMount(() => {
         if (typeof onToggleCb === 'function') {
             onToggleCb(isOpen);
         }
     }, [isOpen]);
-    return [isOpen, onToggle, open, close];
+    return [isOpen, onToggle];
 }
 
 export { useToggle };

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

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

@@ -36,11 +36,11 @@ import { useToggle } from './hooks/use_toggle.js';
  */
 const Dropdown = ({ defaultIsOpen = false, onToggle, children }) => {
     const wrapperRef = useRef(null);
-    const [isOpen, toggleDropdown, openDropdown, closeDropdown] = useToggle(defaultIsOpen, onToggle);
+    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);
     /**
      * context values, they may be used with useContext in any component which is part of Dropdown composition
      */
-    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown, openDropdown, closeDropdown }), [isOpen, toggleDropdown, openDropdown, closeDropdown]);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
     return (React.createElement(DropdownContext.Provider, { value: value },
         React.createElement("div", { ref: wrapperRef, className: cssClasses.dropdown }, children)));
 };

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

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