@dreamcommerce/aurora 2.1.13 → 2.1.14-1

package/build/esm/packages/aurora/src/assets/icon_warning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/assets/types.d.ts

@@ -1,8 +1,12 @@
 import React, { ReactNode } from 'react';
+import { Any } from 'ts-toolbelt';
+import { ICON_SIZES } from './icon_constants';
 export declare type TIcon = {
     children: ReactNode;
 };
+export declare type TIconSize = Any.Keys<typeof ICON_SIZES>;
 export interface IIconProps extends Partial<SVGElement> {
     className?: string;
     onClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+    size?: TIconSize;
 }

package/build/esm/packages/aurora/src/assets/types.js

@@ -1,2 +1,4 @@
 import 'react';
+import 'ts-toolbelt';
+import './icon_constants';
 //# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/assets/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/assets/types.ts"],"names":[],"mappings":"AAAA,OAAiC,OAAO,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/assets/types.ts"],"names":[],"mappings":"AAAA,OAAiC,OAAO,CAAC;AAEzC,OAAoB,aAAa,CAAC;AAClC,OAA2B,kBAAkB,CAAC"}

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

@@ -1,16 +1,16 @@
 import React from 'react';
 import classnames from 'classnames';
 import { cssControl, cssControlS, cssControlError, cssControlDisabled, cssControlReadonly } from '../css_classes.js';
-import cssClasses from '../../../css/input/main.module.less.js';
+import inputCssClasses from '../../../css/input/main.module.less.js';
 import { useControlContext } from '../context.js';
 
 const Input = ({ id, name, padding, placeholder, value, disabled, readOnly, onChange, onKeyPress, onKeyUp, children, ...props }) => {
     const { errors } = useControlContext();
-    const inputClasses = classnames(cssClasses[cssControl], {
-        [cssClasses[cssControlS]]: padding === 'small',
-        [cssClasses[cssControlError]]: errors,
-        [cssClasses[cssControlDisabled]]: disabled,
-        [cssClasses[cssControlReadonly]]: readOnly
+    const inputClasses = classnames(inputCssClasses[cssControl], {
+        [inputCssClasses[cssControlS]]: padding === 'small',
+        [inputCssClasses[cssControlError]]: errors,
+        [inputCssClasses[cssControlDisabled]]: disabled,
+        [inputCssClasses[cssControlReadonly]]: readOnly
     });
     return (React.createElement("input", { ...props, className: inputClasses, id: id, name: name, value: value, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange, onKeyPress: onKeyPress, onKeyUp: onKeyUp }));
 };

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

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

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

@@ -1,21 +1,21 @@
 import React from 'react';
 import classnames from 'classnames';
 import { cssControl, cssControlWrapper, cssControlS, cssControlFocus, cssControlDisabled, cssControlReadonly, cssControlError, cssControlInput } from '../css_classes.js';
-import cssClasses from '../../../css/input/main.module.less.js';
+import inputCssClasses from '../../../css/input/main.module.less.js';
 import { useControlContext } from '../context.js';
 
-const InputWrapper = ({ value, size, isFocused, isDisabled, isReadOnly, preElements, postElements, ...props }) => {
+const InputWrapper = ({ value, size, isFocused, isDisabled, isReadOnly, preElements, postElements, placeholder, ...props }) => {
     const { errors } = useControlContext();
-    const classes = classnames(cssClasses[cssControl], cssClasses[cssControlWrapper], {
-        [cssClasses[cssControlS]]: size === 'small',
-        [cssClasses[cssControlFocus]]: isFocused,
-        [cssClasses[cssControlDisabled]]: isDisabled,
-        [cssClasses[cssControlReadonly]]: isReadOnly,
-        [cssClasses[cssControlError]]: errors
+    const classes = classnames(inputCssClasses[cssControl], inputCssClasses[cssControlWrapper], {
+        [inputCssClasses[cssControlS]]: size === 'small',
+        [inputCssClasses[cssControlFocus]]: isFocused,
+        [inputCssClasses[cssControlDisabled]]: isDisabled,
+        [inputCssClasses[cssControlReadonly]]: isReadOnly,
+        [inputCssClasses[cssControlError]]: errors
     });
     return (React.createElement("div", { ...props, className: classes },
         preElements,
-        React.createElement("input", { type: "text", className: cssClasses[cssControlInput], value: value, readOnly: true }),
+        React.createElement("input", { type: "text", className: inputCssClasses[cssControlInput], value: value, placeholder: placeholder, readOnly: true }),
         postElements));
 };
 

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import classnames from 'classnames';
 import { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes.js';
-import cssClasses from '../../../css/input/main.module.less.js';
+import inputCssClasses from '../../../css/input/main.module.less.js';
 
 const Textarea = React.forwardRef(({ id, name, padding, placeholder, value, disabled, readOnly, onChange, onKeyPress, ...props }, ref) => {
-    const inputClasses = classnames(cssClasses[cssControl], {
-        [cssClasses[cssControlS]]: padding === 'small',
-        [cssClasses[cssControlDisabled]]: disabled,
-        [cssClasses[cssControlReadonly]]: readOnly
+    const inputClasses = classnames(inputCssClasses[cssControl], {
+        [inputCssClasses[cssControlS]]: padding === 'small',
+        [inputCssClasses[cssControlDisabled]]: disabled,
+        [inputCssClasses[cssControlReadonly]]: readOnly
     });
     return (React.createElement("textarea", { ...props, className: inputClasses, id: id, name: name, value: value, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange, onKeyPress: onKeyPress, ref: ref }));
 });

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

@@ -20,6 +20,7 @@ export declare const cssControlDisabled = "control_disabled";
 export declare const cssControlReadonly = "control_readonly";
 export declare const cssControlError = "control_error";
 export declare const cssControlInput = "control__input";
+export declare const cssControlInputRemoveButton = "control__remove-button";
 export declare const checkbox = "checkbox";
 export declare const checkboxDisabled: string;
 export declare const checkboxControl: string;

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

@@ -20,6 +20,7 @@ const cssControlDisabled = 'control_disabled';
 const cssControlReadonly = 'control_readonly';
 const cssControlError = 'control_error';
 const cssControlInput = 'control__input';
+const cssControlInputRemoveButton = 'control__remove-button';
 const checkbox = 'checkbox';
 const checkboxDisabled = `${checkbox}_disabled`;
 const checkboxControl = `${checkbox}__control`;
@@ -42,5 +43,5 @@ const cellSelectorCellActive = `${cellSelectorCell}_active`;
 const cssHelper = 'helper';
 const cssHelperError = `${cssHelper}_error`;
 
-export { cellSelector, cellSelectorCell, cellSelectorCellActive, cellSelectorContainer, cellSelectorRow, checkbox, checkboxControl, checkboxDisabled, checkboxIcon, checkboxLabel, checkboxSwitch, checkboxSwitchControl, checkboxSwitchDisabled, checkboxSwitchIcon, checkboxSwitchLabel, cssControl, cssControlDisabled, cssControlError, cssControlFocus, cssControlInput, cssControlReadonly, cssControlS, cssControlWrapper, cssControls, cssControlsAdditionalInfo, cssControlsContent, cssControlsElement, cssControlsElementCheckbox, cssControlsElementPostfix, cssControlsElementPrefix, cssControlsElementRadio, cssControlsElementVerticalAlignTop, cssControlsError, cssControlsErrors, cssControlsErrorsList, cssControlsErrorsListItem, cssControlsLabel, cssHelper, cssHelperError, radio, radioControl, radioDisabled, radioLabel };
+export { cellSelector, cellSelectorCell, cellSelectorCellActive, cellSelectorContainer, cellSelectorRow, checkbox, checkboxControl, checkboxDisabled, checkboxIcon, checkboxLabel, checkboxSwitch, checkboxSwitchControl, checkboxSwitchDisabled, checkboxSwitchIcon, checkboxSwitchLabel, cssControl, cssControlDisabled, cssControlError, cssControlFocus, cssControlInput, cssControlInputRemoveButton, cssControlReadonly, cssControlS, cssControlWrapper, cssControls, cssControlsAdditionalInfo, cssControlsContent, cssControlsElement, cssControlsElementCheckbox, cssControlsElementPostfix, cssControlsElementPrefix, cssControlsElementRadio, cssControlsElementVerticalAlignTop, cssControlsError, cssControlsErrors, cssControlsErrorsList, cssControlsErrorsListItem, cssControlsLabel, cssHelper, cssHelperError, radio, radioControl, radioDisabled, radioLabel };
 //# sourceMappingURL=css_classes.js.map

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

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

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

@@ -18,14 +18,14 @@ 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 }, additionalInfo }) => {
+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, onSearch }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (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,
             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, onChange: onChange, onToggle: onToggle }))),
+                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, onSearch: onSearch }))),
         React.createElement(Control.Errors, null),
         additionalInfo && React.createElement(Control.AdditionalInfo, null, additionalInfo)));
 };

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

@@ -85,6 +85,7 @@ export interface IInputWrapperProps extends HTMLAttributes<HTMLDivElement> {
     isReadOnly?: boolean;
     preElements?: ReactNode;
     postElements?: ReactNode;
+    placeholder?: string;
 }
 export interface IControlLabelProps {
     id?: string;

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 cssClasses 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';
 

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 cssClasses 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';
 

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

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

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

@@ -2,8 +2,8 @@ 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 cssClasses from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerLabelIcon } from '../css_classes.js';
+import cssClasses from '../../../css/date_picker/main.module.less.js';
 
 const DatepickerLabel = ({ name }) => {
     const { readable, inputValue } = useContext(DatepickerContext);

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

@@ -1,8 +1,8 @@
 import React, { useContext, useRef } from 'react';
 import Dropdown from '../../dropdown/index.js';
 import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
-import cssClasses 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 { DATE_PICKER_TEST_ID } from '../constants.js';
 import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.js';
 import useDateNames from '../hooks/use_date_names.js';

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

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { DropdownContext } from '../../../../dropdown/context/index.js';
 import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
-import cssClasses 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';
 

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import cssClasses 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 = () => {

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
-import cssClasses 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';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
-import cssClasses from '../../../css/date_picker/main.module.less.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 useAnimation from '../hooks/use_animation.js';
 import DaysGrid from './days_grid.js';

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

@@ -1,8 +1,8 @@
 import React, { useContext, useMemo } from 'react';
 import { classNames } from '../../../utilities/styles/classNames.js';
 import DatepickerContext from '../context/value_controller_context.js';
-import cssClasses 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 }) => {

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

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useEffect } from 'react';
 import DatepickerContext from '../context/value_controller_context.js';
-import cssClasses from '../../../css/date_picker/main.module.less.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 { PureDatepicker } from '../components/pure_date_picker.js';
 import CommonRanges from '../components/common_ranges.js';

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 cssClasses 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';
 

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

@@ -5,7 +5,7 @@ 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 iconCssClasses from '../../../css/icons/main.module.less.js';
+import cssClasses$1 from '../../../css/icons/main.module.less.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';
@@ -78,7 +78,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: iconCssClasses['icon_rotate-180'] }),
+                    headerGoBackIcon || React.createElement(IconArrow, { className: cssClasses$1['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/list.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { IDropdownListProps } from '../types';
+import React from 'react';
 /**
  * Dropdown.List component. Displays list.
  * @component

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

@@ -19,11 +19,11 @@ isWithGroups,
 /**
  * Children nodes
  */
-children }) => {
+children, onScroll }) => {
     const listClasses = classnames(cssClasses[cssDropdownList], cssClasses[cssDropdownWithScroll], {
         [cssClasses[cssDropdownListWithGroup]]: isWithGroups
     });
-    return (React.createElement("ul", { role: "listbox", className: listClasses }, children));
+    return (React.createElement("ul", { role: "listbox", className: listClasses, onScroll: onScroll }, children));
 };
 
 export default List;

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

@@ -1,8 +1,11 @@
 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';
 
 /**
  * Dropdown.Select component. Displays select like control. Use it only if you have selectable values.
@@ -26,7 +29,7 @@ isReadonly = false,
 /**
  * array of selected options
  */
-selectedOptions }) => {
+selectedOptions, placeholder, onRemoveOptions }) => {
     const ref = useRef(null);
     /**
      * get values from dropdown context
@@ -42,8 +45,13 @@ selectedOptions }) => {
     const notDisabled = selectedOptions.filter((option) => !option.isDisabled);
     const $hiddenInputs = notDisabled.map((option) => (React.createElement("input", { key: option.value, type: "hidden", name: name, value: option.value, disabled: isDisabled, readOnly: isReadonly })));
     useKeyboardOpenClose(toggleDropdown, isOpen, ref);
+    const handleOnClick = (ev) => {
+        ev.stopPropagation();
+        onRemoveOptions && onRemoveOptions();
+    };
     return (React.createElement("div", { className: cssClasses['select'], "aria-expanded": isOpen, "aria-haspopup": "listbox", ref: ref },
-        React.createElement(InputWrapper, { value: value, isFocused: Boolean(isOpen), isDisabled: isDisabled, isReadOnly: isReadonly, onClick: toggleDropdown }),
+        React.createElement(InputWrapper, { value: value, isFocused: Boolean(isOpen), isDisabled: isDisabled, isReadOnly: isReadonly, onClick: toggleDropdown, placeholder: placeholder, postElements: !!selectedOptions.length && (React.createElement("button", { className: inputCssClasses[cssControlInputRemoveButton], onClick: handleOnClick },
+                React.createElement(IconClose, { size: "s" }))) }),
         $hiddenInputs));
 };
 

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

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

@@ -98,7 +98,7 @@ onChange }) => {
     useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);
     return (React.createElement(DropdownContext.Provider, { value: value },
         React.createElement("div", { ref: wrapperRef, className: cssClasses[cssDropdown] },
-            React.createElement(Dropdown.Select, { name: name, isReadonly: isReadonly, isDisabled: isDisabled, selectedOptions: selectedValues }),
+            React.createElement(Dropdown.Select, { name: name, isReadonly: isReadonly, isDisabled: isDisabled, selectedOptions: selectedValues, onRemoveOptions: setSelectedValues }),
             React.createElement(Dropdown.Content, null,
                 isWithSearch && React.createElement(Dropdown.Search, { onKeyUp: (ev) => handleSearchKeyUp(ev, options, setOptionsList) }),
                 React.createElement(Dropdown.List, { isWithGroups: isWithGroups }, optionsList === null || optionsList === void 0 ? void 0 : optionsList.map((option) => {

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

@@ -1,12 +1,14 @@
 import React, { useRef, useState, useEffect } from 'react';
+import debounce_1 from '../../../../../../../external/lodash/debounce.js';
 import { DropdownContext } from '../../context/index.js';
 import { cssDropdown } from '../../css_classes.js';
 import cssClasses from '../../../../css/dropdown/main.module.less.js';
-import { handleSearchKeyUp, isSelected, handleItemClick } from '../../utilities.js';
+import { isSelected, handleItemClick, handleSearchKeyUp } from '../../utilities.js';
 import { useValue } from '../../hooks/use_value.js';
 import { useToggle } from '../../hooks/use_toggle.js';
 import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
 import Dropdown from '../../index.js';
+import { SEARCH_DEBOUNCE_TIMEOUT_IN_MS } from './select_constants.js';
 
 /**
  * Select component. Build with Dropdown composed components.
@@ -75,7 +77,7 @@ onChange,
  * Place where portal should be placed, by default to body
  * this can be used to put modal inside modal
  */
-portalContainer }) => {
+portalContainer, placeholder, onScroll, innerAdditionalContent, onSearch }) => {
     /**
      * reference to dropdown wrapper element
      */
@@ -100,18 +102,24 @@ portalContainer }) => {
      * hook which resets options list to default on close if select has search and it was used
      */
     useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);
+    const handleSearch = debounce_1((ev) => {
+        onSearch && onSearch(ev);
+        handleSearchKeyUp(ev, options, setOptionsList);
+    }, SEARCH_DEBOUNCE_TIMEOUT_IN_MS);
     useEffect(() => {
         setOptionsList(options);
     }, [options]);
     return (React.createElement(DropdownContext.Provider, { value: value },
         React.createElement("div", { ref: wrapperRef, className: cssClasses[cssDropdown] },
-            React.createElement(Dropdown.Select, { name: name, isReadonly: isReadonly, isDisabled: isDisabled, selectedOptions: selectedValues }),
+            React.createElement(Dropdown.Select, { name: name, isReadonly: isReadonly, isDisabled: isDisabled, selectedOptions: selectedValues, placeholder: placeholder, onRemoveOptions: setSelectedValues }),
             React.createElement(Dropdown.Content, { portalContainer: portalContainer },
-                isWithSearch && React.createElement(Dropdown.Search, { onKeyUp: (ev) => handleSearchKeyUp(ev, options, setOptionsList) }),
-                React.createElement(Dropdown.List, { isWithGroups: isWithGroups }, optionsList === null || optionsList === void 0 ? void 0 : optionsList.map((option) => {
-                    var _a, _b;
-                    return option.isHeader ? (React.createElement(Dropdown.Header, { key: option.text, text: option.text })) : (React.createElement(Dropdown.Option, { key: option.value, option: option, isSelected: isSelected(option, selectedValues), isDisabled: (_a = option.isDisabled) !== null && _a !== void 0 ? _a : isDisabled, isReadonly: (_b = option.isReadonly) !== null && _b !== void 0 ? _b : isReadonly, onClick: (option) => handleItemClick(option, defaultCloseOnClick, setSelectedValues, toggleDropdown) }));
-                }))))));
+                isWithSearch && React.createElement(Dropdown.Search, { onKeyUp: (ev) => handleSearch(ev) }),
+                React.createElement(Dropdown.List, { isWithGroups: isWithGroups, onScroll: onScroll }, optionsList === null || optionsList === void 0 ? void 0 :
+                    optionsList.map((option) => {
+                        var _a, _b;
+                        return option.isHeader ? (React.createElement(Dropdown.Header, { key: option.text, text: option.text })) : (React.createElement(Dropdown.Option, { key: option.value, option: option, isSelected: isSelected(option, selectedValues), isDisabled: (_a = option.isDisabled) !== null && _a !== void 0 ? _a : isDisabled, isReadonly: (_b = option.isReadonly) !== null && _b !== void 0 ? _b : isReadonly, onClick: (option) => handleItemClick(option, defaultCloseOnClick, setSelectedValues, toggleDropdown) }));
+                    }),
+                    innerAdditionalContent)))));
 };
 
 export default Select;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,kDAAsD;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/hoc/select/select_constants.d.ts

@@ -0,0 +1 @@
+export declare const SEARCH_DEBOUNCE_TIMEOUT_IN_MS = 500;

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

@@ -0,0 +1,4 @@
+const SEARCH_DEBOUNCE_TIMEOUT_IN_MS = 500;
+
+export { SEARCH_DEBOUNCE_TIMEOUT_IN_MS };
+//# sourceMappingURL=select_constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;"}

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

@@ -0,0 +1,3 @@
+export declare const cssSelect = "select";
+export declare const cssSelectError: string;
+export declare const cssSelectErrorIcon: string;

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

@@ -0,0 +1,6 @@
+const cssSelect = 'select';
+const cssSelectError = `${cssSelect}__error`;
+const cssSelectErrorIcon = `${cssSelectError}-icon`;
+
+export { cssSelect, cssSelectError, cssSelectErrorIcon };
+//# sourceMappingURL=css_classes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/hoc/xhr_select/hooks/use_xhr_select.d.ts

@@ -0,0 +1,2 @@
+import { TUseXhrSelect, TUseXhrSelectProps } from './use_xhr_select_types';
+export declare const useXhrSelect: ({ url, fetchClient, onScroll }: TUseXhrSelectProps) => TUseXhrSelect;

package/build/esm/packages/aurora/src/components/dropdown/hoc/xhr_select/hooks/use_xhr_select.js

@@ -0,0 +1,118 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useTranslation } from '../../../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { SCROLL_FETCH_TIMEOUT_IN_MS } from '../xhr_select_constants.js';
+import { XhrSelectResponseParser } from '../http/xhr_select_response_parser.js';
+
+const useXhrSelect = ({ url, fetchClient, onScroll }) => {
+    const [selectData, setSelectData] = useState();
+    const [errors, setErrors] = useState({});
+    const [isFetchingInitialData, setIsFetchingInitialData] = useState(true);
+    const [scrollTimer, setScrollTimer] = useState();
+    const [search, setSearch] = useState('');
+    const [t] = useTranslation();
+    const xhrSelectResponseParser = new XhrSelectResponseParser();
+    const loadSelectDataOnScroll = (event) => {
+        onScroll && onScroll(event);
+        if ((selectData === null || selectData === void 0 ? void 0 : selectData.page) === (selectData === null || selectData === void 0 ? void 0 : selectData.pages))
+            return;
+        const $target = event.target;
+        const maxScroll = $target.scrollHeight - $target.getBoundingClientRect().height;
+        if (maxScroll !== $target.scrollTop || !selectData) {
+            resetScrollTimerAndError();
+            return;
+        }
+        setScrollTimer(Number(setTimeout(() => {
+            fetchXhrData({
+                url: `${url}?page=${selectData.page + 1}&search=${search}`,
+                handleResponseData: (extraLoadedSelectData) => {
+                    const newSelectData = {
+                        ...selectData,
+                        page: extraLoadedSelectData.page,
+                        list: [...selectData.list, ...extraLoadedSelectData.list]
+                    };
+                    setSelectData(newSelectData);
+                },
+                handleCatchErrors: () => {
+                    setErrors({
+                        ...errors,
+                        scrollError: t('Failed to load')
+                    });
+                }
+            });
+        }, SCROLL_FETCH_TIMEOUT_IN_MS)));
+    };
+    const resetScrollTimerAndError = () => {
+        clearTimeout(scrollTimer);
+        setScrollTimer(undefined);
+        setErrors({
+            ...errors,
+            scrollError: ''
+        });
+    };
+    const loadSelectDataOnSearch = (ev) => {
+        const currentSearch = ev.target.value;
+        if (currentSearch === search)
+            return;
+        setSearch(currentSearch);
+        if (currentSearch === '') {
+            fetchInitialData();
+            return;
+        }
+        fetchXhrData({
+            url: `${url}?search=${currentSearch}`,
+            handleResponseData: (selectDataFromSearchResults) => {
+                setSelectData(selectDataFromSearchResults);
+            },
+            handleCatchErrors: () => {
+                setErrors({
+                    ...errors,
+                    scrollError: t('Failed to load')
+                });
+            }
+        });
+    };
+    const fetchXhrData = useCallback(({ url, handleResponseData, handleCatchErrors }) => {
+        fetchClient
+            .fetch({ method: 'get', url })
+            .then((selectDataResponseDTO) => {
+            const parsedSelectData = xhrSelectResponseParser.parse(selectDataResponseDTO.data);
+            handleResponseData(parsedSelectData);
+        })
+            .catch(() => {
+            handleCatchErrors && handleCatchErrors();
+        });
+    }, [fetchClient, xhrSelectResponseParser]);
+    const fetchInitialData = useCallback(() => {
+        fetchXhrData({
+            url: `${url}?show-recent=1`,
+            handleResponseData: (initialSelectData) => {
+                setSelectData(initialSelectData);
+                setIsFetchingInitialData(false);
+            },
+            handleCatchErrors: () => {
+                setErrors({
+                    ...errors,
+                    fetchError: t('Failed to load data. Please refresh the page and try again.')
+                });
+            }
+        });
+    }, [errors, fetchXhrData, url, t]);
+    useEffect(() => {
+        fetchInitialData();
+        return () => {
+            fetchClient.makeCancelable().cancelRequest();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return {
+        selectData,
+        errors,
+        isFetchingInitialData,
+        loadSelectDataOnScroll,
+        loadSelectDataOnSearch,
+        search
+    };
+};
+
+export { useXhrSelect };
+//# sourceMappingURL=use_xhr_select.js.map