@expressms/smartapp-ui 3.0.0-alpha.1 → 3.0.0-alpha.100

package/build/main//321/201omponents/Calendar/Calendar.js

@@ -20,82 +20,129 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import DatePicker, { registerLocale } from 'react-datepicker';
+import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import ar from 'date-fns/locale/ar';
-import de from 'date-fns/locale/de';
-import en from 'date-fns/locale/en-US';
-import es from 'date-fns/locale/es';
-import fr from 'date-fns/locale/fr';
-import id from 'date-fns/locale/id';
-import ms from 'date-fns/locale/ms';
-import ru from 'date-fns/locale/ru';
-import tr from 'date-fns/locale/tr';
+import { isArray, isString } from 'lodash';
+import { ar } from 'date-fns/locale/ar';
+import { de } from 'date-fns/locale/de';
+import { enUS } from 'date-fns/locale/en-US';
+import { es } from 'date-fns/locale/es';
+import { fr } from 'date-fns/locale/fr';
+import { id } from 'date-fns/locale/id';
+import { ms } from 'date-fns/locale/ms';
+import { ru } from 'date-fns/locale/ru';
+import { tr } from 'date-fns/locale/tr';
+import { uz } from 'date-fns/locale/uz';
 import { generateFontFamilyStyle } from '../../helpers';
-import { LANGUAGES } from '../../constants';
+import { BUTTON, COLORS, LANGUAGES, SPACE } from '../../constants';
 import { ReactComponent as ArrowDownIcon } from '../../assets/icons/arrow-down.svg';
 import { ReactComponent as ArrowUpIcon } from '../../assets/icons/arrow-up.svg';
+import { ReactComponent as ArrowNextIcon } from '../../assets/icons/calendar-arrow-next.svg';
+import { ReactComponent as ArrowPrevIcon } from '../../assets/icons/calendar-arrow-prev.svg';
 import '../../styles/styles.scss';
 registerLocale(LANGUAGES.ru, ru);
 registerLocale(LANGUAGES.ar, ar);
-registerLocale(LANGUAGES.en, en);
+registerLocale(LANGUAGES.en, enUS);
 registerLocale(LANGUAGES.fr, fr);
 registerLocale(LANGUAGES.es, es);
 registerLocale(LANGUAGES.de, de);
 registerLocale(LANGUAGES.ms, ms);
 registerLocale(LANGUAGES.tr, tr);
 registerLocale(LANGUAGES.id, id);
+registerLocale(LANGUAGES.uz, uz);
 var DATE_FORMAT;
 (function (DATE_FORMAT) {
     DATE_FORMAT["DATE_PICKER_FORMAT"] = "dd MMMM";
-    DATE_FORMAT["DAY_MONTH_YEAR"] = "d MMMM yyyy";
-    DATE_FORMAT["MONTH_YEAR"] = "LLLL yyyy";
-    DATE_FORMAT["MONTH"] = "LLLL";
+    DATE_FORMAT["DAY_MONTH_YEAR"] = "dd.MM.yyyy";
 })(DATE_FORMAT || (DATE_FORMAT = {}));
+var DATE_DISPLAY;
+(function (DATE_DISPLAY) {
+    DATE_DISPLAY["NUMERIC"] = "numeric";
+    DATE_DISPLAY["LONG"] = "long";
+})(DATE_DISPLAY || (DATE_DISPLAY = {}));
+var BUTTON_CONTROLS;
+(function (BUTTON_CONTROLS) {
+    BUTTON_CONTROLS["PREVIOUS"] = "previous";
+    BUTTON_CONTROLS["NEXT"] = "next";
+})(BUTTON_CONTROLS || (BUTTON_CONTROLS = {}));
 var READONLY_ATTRIBUTE = 'readonly';
 var READONLY_ATTRIBUTE_VALUE = 'true';
-var DATE_PICKER_FORMAT = DATE_FORMAT.DATE_PICKER_FORMAT, DAY_MONTH_YEAR = DATE_FORMAT.DAY_MONTH_YEAR, MONTH_YEAR = DATE_FORMAT.MONTH_YEAR, MONTH = DATE_FORMAT.MONTH;
+var RU_LOCALE = 'ru-RU';
+var RU_YEAR = 'г.';
+var DATE_PICKER_FORMAT = DATE_FORMAT.DATE_PICKER_FORMAT, DAY_MONTH_YEAR = DATE_FORMAT.DAY_MONTH_YEAR;
+var NUMERIC = DATE_DISPLAY.NUMERIC, LONG = DATE_DISPLAY.LONG;
+var PREVIOUS = BUTTON_CONTROLS.PREVIOUS, NEXT = BUTTON_CONTROLS.NEXT;
+var DatePickerAny = DatePicker;
+var checkIsDifferentYears = function (defaultSelectedDate, selectedDate) { return defaultSelectedDate.getFullYear() !== selectedDate.getFullYear(); };
+var generateHeaderLocale = function (date, locale) {
+    var selectedLocale = locale ? (isString(locale) ? locale : RU_LOCALE) : RU_LOCALE;
+    var formattedDate = new Intl.DateTimeFormat(selectedLocale, { year: NUMERIC, month: LONG }).format(date);
+    var _a = formattedDate.split(SPACE), month = _a[0], year = _a[1];
+    var capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1);
+    // Убираем "г." из года, если локаль русская
+    var formattedYear = selectedLocale === RU_LOCALE ? year.replace(RU_YEAR, '') : year;
+    return "".concat(capitalizedMonth, " ").concat(formattedYear);
+};
 var CalendarDatepicker = function (_a) {
-    var fontFamily = _a.fontFamily, id = _a.id, initialSelectedDate = _a.initialSelectedDate, initialSelectedDateRange = _a.initialSelectedDateRange, onChange = _a.onChange, onChangeSelectedDateRange = _a.onChangeSelectedDateRange, _b = _a.isRange, isRange = _b === void 0 ? false : _b, width = _a.width, _c = _a.isAnnualEvent, isAnnualEvent = _c === void 0 ? false : _c, props = __rest(_a, ["fontFamily", "id", "initialSelectedDate", "initialSelectedDateRange", "onChange", "onChangeSelectedDateRange", "isRange", "width", "isAnnualEvent"]);
-    var defaultSelectedDate = new Date();
-    var _d = useState(initialSelectedDate || defaultSelectedDate), selectedDate = _d[0], setSelectedDate = _d[1];
-    var _e = useState(initialSelectedDateRange || [defaultSelectedDate, defaultSelectedDate]), selectedDateRange = _e[0], setSelectedDateRange = _e[1];
-    var _f = useState(false), isActiveDatepicker = _f[0], setIsActiveDatepicker = _f[1];
-    var startDate = selectedDateRange[0], endDate = selectedDateRange[1];
-    var inline = props.inline;
-    useEffect(function () {
-        if (initialSelectedDate) {
-            setSelectedDate(initialSelectedDate);
-            onChange(initialSelectedDate);
-        }
-        /* eslint-disable-next-line */
-    }, [initialSelectedDate]);
+    var fontFamily = _a.fontFamily, _b = _a.locale, locale = _b === void 0 ? LANGUAGES.ru : _b, _c = _a.isRange, isRange = _c === void 0 ? false : _c, inline = _a.inline, disabled = _a.disabled, id = _a.id, width = _a.width, parentContainerRef = _a.parentContainerRef, selectedDate = _a.selectedDate, selectedDateRange = _a.selectedDateRange, onChange = _a.onChange, onChangeSelectedDateRange = _a.onChangeSelectedDateRange, props = __rest(_a, ["fontFamily", "locale", "isRange", "inline", "disabled", "id", "width", "parentContainerRef", "selectedDate", "selectedDateRange", "onChange", "onChangeSelectedDateRange"]);
+    var currentDate = new Date();
+    var defaultSelectedDate = selectedDate || currentDate;
+    var correctDateFormat = function (date) { return (checkIsDifferentYears(currentDate, date) ? DAY_MONTH_YEAR : DATE_PICKER_FORMAT); };
+    var _d = useState(selectedDateRange || [currentDate, currentDate]), dateRange = _d[0], setDateRange = _d[1];
+    var _e = useState(false), isActiveDatepicker = _e[0], setIsActiveDatepicker = _e[1];
+    var _f = useState(correctDateFormat(defaultSelectedDate)), dateFormat = _f[0], setDateFormat = _f[1];
+    var startDate = dateRange[0], endDate = dateRange[1];
     useEffect(function () {
         var element = document.getElementById(id);
         element === null || element === void 0 ? void 0 : element.setAttribute(READONLY_ATTRIBUTE, READONLY_ATTRIBUTE_VALUE);
     }, [id]);
     var handleChangeDate = function (date) {
-        if (date) {
-            setSelectedDate(date);
-            onChange(date);
+        if (date instanceof Date) {
             var element_1 = document.getElementById(id);
+            setDateFormat(correctDateFormat(date));
+            onChange(date);
             setTimeout(function () { return element_1 === null || element_1 === void 0 ? void 0 : element_1.blur(); }, 10);
         }
     };
     var handleChangeDateRange = function (period) {
-        setSelectedDateRange(period);
-        onChangeSelectedDateRange === null || onChangeSelectedDateRange === void 0 ? void 0 : onChangeSelectedDateRange(period);
+        if (isArray(period)) {
+            var startPeriodDate = period[0], endPeriodDate = period[1];
+            setDateRange([startPeriodDate, endPeriodDate]);
+            onChangeSelectedDateRange === null || onChangeSelectedDateRange === void 0 ? void 0 : onChangeSelectedDateRange([startPeriodDate, endPeriodDate]);
+        }
     };
     var handleDatePickerClick = function () { return setIsActiveDatepicker(!isActiveDatepicker); };
-    var handleClickArrowButton = function () {
-        var element = document.getElementById(id);
-        element === null || element === void 0 ? void 0 : element.focus();
+    var handleClickArrowButton = function () { var _a; return (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.focus(); };
+    var popperContainer = function (_a) {
+        var children = _a.children;
+        var parentContainerRefCurrent = parentContainerRef === null || parentContainerRef === void 0 ? void 0 : parentContainerRef.current;
+        return parentContainerRefCurrent ? createPortal(children, parentContainerRefCurrent) : _jsx(_Fragment, { children: children });
+    };
+    var renderHeaderArrow = function (_a) {
+        var onClick = _a.onClick, disabled = _a.disabled, ariaLabel = _a.ariaLabel, Icon = _a.Icon;
+        return (_jsx("button", __assign({ className: "smartapp-calendar-header__arrows--button", type: BUTTON, onClick: onClick, disabled: disabled, "aria-label": ariaLabel }, { children: _jsx(Icon, {}) })));
+    };
+    var renderCalendarHeader = function (_a) {
+        var date = _a.date, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled;
+        return (_jsxs("div", __assign({ className: "smartapp-calendar-header" }, { children: [_jsx("span", __assign({ className: "smartapp-calendar-header__value" }, { children: generateHeaderLocale(date, locale) })), _jsxs("div", __assign({ className: "smartapp-calendar-header__arrows" }, { children: [renderHeaderArrow({
+                            onClick: decreaseMonth,
+                            disabled: prevMonthButtonDisabled,
+                            ariaLabel: PREVIOUS,
+                            Icon: ArrowPrevIcon,
+                        }), renderHeaderArrow({
+                            onClick: increaseMonth,
+                            disabled: nextMonthButtonDisabled,
+                            ariaLabel: NEXT,
+                            Icon: ArrowNextIcon,
+                        })] }))] })));
     };
-    var annualEventFormat = isAnnualEvent ? DAY_MONTH_YEAR : DATE_PICKER_FORMAT;
-    var annualCalendarFormat = isAnnualEvent ? MONTH_YEAR : MONTH;
-    return (_jsx("div", __assign({ className: "smartapp-calendar-component", style: __assign({ width: "".concat(width, "%") }, generateFontFamilyStyle(fontFamily)) }, { children: isRange ? (_jsx(DatePicker, __assign({ id: id, selectsRange: true, startDate: startDate, endDate: endDate, dateFormat: annualEventFormat, className: "smartapp-calendar-input", onChange: handleChangeDateRange }, props))) : (_jsxs(_Fragment, { children: [_jsx(DatePicker, __assign({ id: id, selected: selectedDate, dateFormat: annualEventFormat, dateFormatCalendar: annualCalendarFormat, className: "smartapp-calendar-input", popperClassName: "smartapp-calendar-popper", calendarClassName: classNames({ 'smartapp-calendar-inline-background': inline }), onChange: handleChangeDate, onFocus: handleDatePickerClick, onBlur: handleDatePickerClick }, props)), !inline && (_jsx("button", __assign({ onClick: handleClickArrowButton, className: "smartapp-calendar-input__arrow" }, { children: isActiveDatepicker ? _jsx(ArrowUpIcon, {}) : _jsx(ArrowDownIcon, {}) })))] })) })));
+    var renderArrows = function () { return (_jsx("button", __assign({ onClick: handleClickArrowButton, className: "smartapp-calendar-input__arrow", disabled: disabled }, { children: isActiveDatepicker ? _jsx(ArrowUpIcon, { color: COLORS.iconAccent }) : _jsx(ArrowDownIcon, {}) }))); };
+    var commonDatePickerProps = __assign({ id: id, locale: locale, inline: inline, disabled: disabled, selectsMultiple: false, dateFormat: dateFormat, className: 'smartapp-calendar-input', popperClassName: 'smartapp-calendar-popper', popperContainer: popperContainer, renderCustomHeader: renderCalendarHeader }, props);
+    var rangeDatePickerProps = __assign(__assign({}, commonDatePickerProps), { selectsRange: true });
+    return (_jsx("div", __assign({ className: "smartapp-calendar-component", style: __assign({ width: "".concat(width, "%") }, generateFontFamilyStyle(fontFamily)) }, { children: isRange ? (_jsx(DatePickerAny, __assign({}, rangeDatePickerProps, { startDate: startDate, endDate: endDate, onChange: handleChangeDateRange }))) : (_jsxs(_Fragment, { children: [_jsx(DatePickerAny, __assign({ selected: selectedDate, calendarClassName: classNames({ 'smartapp-calendar-inline-background': inline }), onBlur: handleDatePickerClick, onFocus: handleDatePickerClick, onChange: handleChangeDate }, commonDatePickerProps)), !inline && renderArrows()] })) })));
 };
 export default CalendarDatepicker;
 //# sourceMappingURL=Calendar.js.map

package/build/main//321/201omponents/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/сomponents/Calendar/Calendar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/сomponents/Calendar/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAoC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpF,OAAO,UAAU,EAAE,EAAoC,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAElE,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAA;AACnF,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAC/E,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,MAAM,4CAA4C,CAAA;AAC5F,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,MAAM,4CAA4C,CAAA;AAC5F,OAAO,0BAA0B,CAAA;AAEjC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAChC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAChC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;AAClC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAChC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAChC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAChC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAChC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAChC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAChC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;AAWhC,IAAK,WAGJ;AAHD,WAAK,WAAW;IACd,6CAA8B,CAAA;IAC9B,4CAA6B,CAAA;AAC/B,CAAC,EAHI,WAAW,KAAX,WAAW,QAGf;AAED,IAAK,YAGJ;AAHD,WAAK,YAAY;IACf,mCAAmB,CAAA;IACnB,6BAAa,CAAA;AACf,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,IAAK,eAGJ;AAHD,WAAK,eAAe;IAClB,wCAAqB,CAAA;IACrB,gCAAa,CAAA;AACf,CAAC,EAHI,eAAe,KAAf,eAAe,QAGnB;AAED,IAAM,kBAAkB,GAAG,UAAU,CAAA;AACrC,IAAM,wBAAwB,GAAG,MAAM,CAAA;AACvC,IAAM,SAAS,GAAG,OAAO,CAAA;AACzB,IAAM,OAAO,GAAG,IAAI,CAAA;AAEZ,IAAA,kBAAkB,GAAqB,WAAW,mBAAhC,EAAE,cAAc,GAAK,WAAW,eAAhB,CAAgB;AAClD,IAAA,OAAO,GAAW,YAAY,QAAvB,EAAE,IAAI,GAAK,YAAY,KAAjB,CAAiB;AAC9B,IAAA,QAAQ,GAAW,eAAe,SAA1B,EAAE,IAAI,GAAK,eAAe,KAApB,CAAoB;AAC1C,IAAM,aAAa,GAAG,UAAiB,CAAA;AAEvC,IAAM,qBAAqB,GAAG,UAAC,mBAAyB,EAAE,YAAkB,IAAK,OAAA,mBAAmB,CAAC,WAAW,EAAE,KAAK,YAAY,CAAC,WAAW,EAAE,EAAhE,CAAgE,CAAA;AAEjJ,IAAM,oBAAoB,GAAG,UAAC,IAAU,EAAE,MAAgB;IACxD,IAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IACnF,IAAM,aAAa,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IACpG,IAAA,KAAgB,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,EAAzC,KAAK,QAAA,EAAE,IAAI,QAA8B,CAAA;IAChD,IAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACvE,4CAA4C;IAC5C,IAAM,aAAa,GAAG,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACrF,OAAO,UAAG,gBAAgB,cAAI,aAAa,CAAE,CAAA;AAC/C,CAAC,CAAA;AAED,IAAM,kBAAkB,GAAG,UAAC,EAchB;IAbV,IAAA,UAAU,gBAAA,EACV,cAAqB,EAArB,MAAM,mBAAG,SAAS,CAAC,EAAE,KAAA,EACrB,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,EAAE,QAAA,EACF,KAAK,WAAA,EACL,kBAAkB,wBAAA,EAClB,YAAY,kBAAA,EACZ,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACR,yBAAyB,+BAAA,EACtB,KAAK,cAbkB,4KAc3B,CADS;IAER,IAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAA;IAC9B,IAAM,mBAAmB,GAAG,YAAY,IAAI,WAAW,CAAA;IACvD,IAAM,iBAAiB,GAAG,UAAC,IAAU,IAAK,OAAA,CAAC,qBAAqB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAhF,CAAgF,CAAA;IAEpH,IAAA,KAA4B,QAAQ,CAAC,iBAAiB,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,EAApF,SAAS,QAAA,EAAE,YAAY,QAA6D,CAAA;IACrF,IAAA,KAA8C,QAAQ,CAAC,KAAK,CAAC,EAA5D,kBAAkB,QAAA,EAAE,qBAAqB,QAAmB,CAAA;IAC7D,IAAA,KAA8B,QAAQ,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,EAA7E,UAAU,QAAA,EAAE,aAAa,QAAoD,CAAA;IAC7E,IAAA,SAAS,GAAa,SAAS,GAAtB,EAAE,OAAO,GAAI,SAAS,GAAb,CAAa;IAEtC,SAAS,CAAC;QACR,IAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;QAC3C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAC,kBAAkB,EAAE,wBAAwB,CAAC,CAAA;IACrE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAER,IAAM,gBAAgB,GAAG,UAAC,IAAW;QACnC,IAAI,IAAI,YAAY,IAAI,EAAE;YACxB,IAAM,SAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;YAC3C,aAAa,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAA;YACtC,QAAQ,CAAC,IAAI,CAAC,CAAA;YACd,UAAU,CAAC,cAAM,OAAA,SAAO,aAAP,SAAO,uBAAP,SAAO,CAAE,IAAI,EAAE,EAAf,CAAe,EAAE,EAAE,CAAC,CAAA;SACtC;IACH,CAAC,CAAA;IAED,IAAM,qBAAqB,GAAG,UAAC,MAAa;QAC1C,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;YACZ,IAAA,eAAe,GAAmB,MAAM,GAAzB,EAAE,aAAa,GAAI,MAAM,GAAV,CAAU;YAC/C,YAAY,CAAC,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC,CAAA;YAC9C,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAG,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC,CAAA;SAC9D;IACH,CAAC,CAAA;IAED,IAAM,qBAAqB,GAAG,cAAM,OAAA,qBAAqB,CAAC,CAAC,kBAAkB,CAAC,EAA1C,CAA0C,CAAA;IAC9E,IAAM,sBAAsB,GAAG,sBAAM,OAAA,MAAA,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,0CAAE,KAAK,EAAE,CAAA,EAAA,CAAA;IAEzE,IAAM,eAAe,GAAG,UAAC,EAA8B;YAA5B,QAAQ,cAAA;QACjC,IAAM,yBAAyB,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,CAAA;QAC7D,OAAO,yBAAyB,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC,4BAAG,QAAQ,GAAI,CAAA;IACxG,CAAC,CAAA;IAED,IAAM,iBAAiB,GAAG,UAAC,EAA0D;YAAxD,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA;QAA2B,OAAA,CACxF,0BAAQ,SAAS,EAAC,0CAA0C,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,gBAAc,SAAS,gBACpI,KAAC,IAAI,KAAG,IACD,CACV;IAJyF,CAIzF,CAAA;IAED,IAAM,oBAAoB,GAAG,UAAC,EAMK;YALjC,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,uBAAuB,6BAAA,EACvB,uBAAuB,6BAAA;QACe,OAAA,CACtC,wBAAK,SAAS,EAAC,0BAA0B,iBACvC,wBAAM,SAAS,EAAC,iCAAiC,gBAAE,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAQ,EAC7F,wBAAK,SAAS,EAAC,kCAAkC,iBAC9C,iBAAiB,CAAC;4BACjB,OAAO,EAAE,aAAa;4BACtB,QAAQ,EAAE,uBAAuB;4BACjC,SAAS,EAAE,QAAQ;4BACnB,IAAI,EAAE,aAAa;yBACpB,CAAC,EACD,iBAAiB,CAAC;4BACjB,OAAO,EAAE,aAAa;4BACtB,QAAQ,EAAE,uBAAuB;4BACjC,SAAS,EAAE,IAAI;4BACf,IAAI,EAAE,aAAa;yBACpB,CAAC,KACE,KACF,CACP;IAlBuC,CAkBvC,CAAA;IAED,IAAM,YAAY,GAAG,cAAM,OAAA,CACzB,0BAAQ,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAC,gCAAgC,EAAC,QAAQ,EAAE,QAAQ,gBACnG,kBAAkB,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU,GAAI,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,IAC5E,CACV,EAJ0B,CAI1B,CAAA;IAED,IAAM,qBAAqB,cACzB,EAAE,IAAA,EACF,MAAM,QAAA,EACN,MAAM,QAAA,EACN,QAAQ,UAAA,EACR,eAAe,EAAE,KAAK,EACtB,UAAU,YAAA,EACV,SAAS,EAAE,yBAAyB,EACpC,eAAe,EAAE,0BAA0B,EAC3C,eAAe,iBAAA,EACf,kBAAkB,EAAE,oBAAoB,IACrC,KAAK,CACT,CAAA;IAED,IAAM,oBAAoB,GAAG,sBAAK,qBAAqB,KAAE,YAAY,EAAE,IAAI,GAAsB,CAAA;IAEjG,OAAO,CACL,uBAAK,SAAS,EAAC,6BAA6B,EAAC,KAAK,aAAI,KAAK,EAAE,UAAG,KAAK,MAAG,IAAK,uBAAuB,CAAC,UAAU,CAAC,iBAC7G,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,aAAa,eAAK,oBAAoB,IAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,qBAAqB,IAAI,CACrH,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,aAAa,aACZ,QAAQ,EAAE,YAAY,EACtB,iBAAiB,EAAE,UAAU,CAAC,EAAE,qCAAqC,EAAE,MAAM,EAAE,CAAC,EAChF,MAAM,EAAE,qBAAqB,EAC7B,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAE,gBAAgB,IACtB,qBAAqB,EACzB,EACD,CAAC,MAAM,IAAI,YAAY,EAAE,IACzB,CACJ,IACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/build/main//321/201omponents/Calendar/types.d.ts

@@ -1,14 +1,24 @@
-import { ReactDatePickerProps } from 'react-datepicker';
+import { RefObject } from 'react';
+import { DatePickerProps } from 'react-datepicker';
+import type { Locale } from 'date-fns';
 import { IFontFamilyProps } from '../../constants';
 import { IntRange } from '../types';
+interface ILocale extends Pick<Locale, 'options' | 'formatLong' | 'localize' | 'match'> {
+}
+export type TLocale = string | ILocale;
+export type TDate = Date | Date[] | [Date | null, Date | null] | null;
 export type TDateRange = [Date | null, Date | null];
-export interface ICalendarProps extends ReactDatePickerProps, IFontFamilyProps {
+export type TDatePickerProps = Omit<DatePickerProps, 'id' | 'selectsRange' | 'selectsMultiple' | 'onChange'> & {
+    selectsMultiple?: false;
+};
+export type TCalendar = TDatePickerProps & IFontFamilyProps & {
     id: string;
-    onChange: (date: Date) => void;
-    isAnnualEvent?: boolean;
-    initialSelectedDate?: Date;
-    initialSelectedDateRange?: TDateRange;
     isRange?: boolean;
-    onChangeSelectedDateRange?: (period: TDateRange) => void;
     width?: IntRange<1, 101>;
-}
+    parentContainerRef?: RefObject<HTMLDivElement | null>;
+    selectedDate?: Date;
+    selectedDateRange?: TDateRange;
+    onChange: (date: Date) => void;
+    onChangeSelectedDateRange?: (period: TDateRange) => void;
+};
+export {};

package/build/main//321/201omponents/Charts/ChartBar/ChartBar.js

@@ -21,7 +21,7 @@ import { DEFAULT_CHART_HEIGHT, LEGEND, OPTIONS, OPTION_GRID, OPTION_TOOLTIP, OPT
 import '../../../styles/styles.scss';
 var series = OPTIONS.series, shadow = OPTIONS.shadow, bar = OPTIONS.bar;
 var option = function (_a) {
-    var _b = _a.fontFamily, fontFamily = _b === void 0 ? FONT_FAMILY.onest : _b, data = _a.data, xAxis = _a.xAxis, tooltipXAxis = _a.tooltipXAxis;
+    var _b = _a.fontFamily, fontFamily = _b === void 0 ? FONT_FAMILY.inter : _b, data = _a.data, xAxis = _a.xAxis, tooltipXAxis = _a.tooltipXAxis;
     return ({
         legend: LEGEND,
         tooltip: __assign(__assign({}, OPTION_TOOLTIP), { axisPointer: { type: shadow }, formatter: function (params) { return renderChartTooltip({ chartType: bar, params: params, tooltipXAxis: tooltipXAxis }); } }),

package/build/main//321/201omponents/Charts/ChartLine/ChartLine.js

@@ -21,7 +21,7 @@ import { DEFAULT_CHART_HEIGHT, LEGEND, NUMBER_FORMATTER, OPTIONS, OPTION_GRID, O
 import '../../../styles/styles.scss';
 var line = OPTIONS.line;
 var option = function (_a) {
-    var _b = _a.fontFamily, fontFamily = _b === void 0 ? FONT_FAMILY.onest : _b, data = _a.data, xAxis = _a.xAxis, tooltipXAxis = _a.tooltipXAxis;
+    var _b = _a.fontFamily, fontFamily = _b === void 0 ? FONT_FAMILY.inter : _b, data = _a.data, xAxis = _a.xAxis, tooltipXAxis = _a.tooltipXAxis;
     return ({
         textStyle: { fontFamily: fontFamily },
         legend: LEGEND,

package/build/main//321/201omponents/Charts/ChartPie/ChartPie.js

@@ -23,7 +23,7 @@ import '../../../styles/styles.scss';
 var center = OPTIONS.center, pie = OPTIONS.pie;
 var white = COLORS.white, black = COLORS.black, blue = COLORS.blue;
 var option = function (_a) {
-    var _b = _a.fontFamily, fontFamily = _b === void 0 ? FONT_FAMILY.onest : _b, chartSize = _a.chartSize, data = _a.data, subtitle = _a.subtitle;
+    var _b = _a.fontFamily, fontFamily = _b === void 0 ? FONT_FAMILY.inter : _b, chartSize = _a.chartSize, data = _a.data, subtitle = _a.subtitle;
     return ({
         legend: LEGEND,
         tooltip: { className: PIE_TOOLTIP_CLASS_NAME, borderColor: blue, formatter: renderPieChartTooltip },

package/build/main//321/201omponents/Chip/Chip.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import { IChipProps } from './types';
 import '../../styles/styles.scss';
-declare const Chip: ({ fontFamily, language, name, email, uid, avatar, isAvatarHidden, isDisabled, isError, isLoading, isWarning, isEye, isMyContacts, isOutline, isOpenContextMenu, userType, contextMenuItems, className, styles, iconColor, platform, onDelete, setIsOpenContextMenu, }: IChipProps) => import("react/jsx-runtime").JSX.Element;
-export default Chip;
+declare const _default: React.MemoExoticComponent<({ fontFamily, platform, language, name, organizerName, email, uid, avatar, isAvatarHidden, isUserIconHidden, isEmailMode, isDisabled, isError, isLoading, isWarning, isEye, isMyContacts, isOrganizerShort, isOutline, isDraggableLayer, userType, inviteStatus, contextMenuItems, className, styles, iconColor, draggableData, dropdownId, onDelete, setIsOpenContextMenu, }: IChipProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/main//321/201omponents/Chip/Chip.js

@@ -9,19 +9,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var _a;
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/* eslint-disable max-lines */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
-import { useLongTap } from '../../hooks/useLongTap';
+import { useDraggable } from '@dnd-kit/core';
+import { useMobileLongTap } from '../../hooks/useMobileLongTap';
 import Avatar from '../Avatar';
+import { setDragBlocked } from '../ChipDndContext/ChipDndContext';
 import ContextMenu from '../ContextMenu';
 import Loader from '../Loader';
-import { generateAvatarIcon, generateColor, generateFontFamilyStyle, isWebPlatform, renderUserIcon } from '../../helpers';
-import { COLORS, EVENT_LISTENER_TYPES, FIT_CONTENT, LANGUAGES, PLATFORM } from '../../constants';
+import { createSanitizedHtml, generateAvatarIcon, generateColor, generateFontFamilyStyle, isWebPlatform, renderUserIcon } from '../../helpers';
+import { COLORS, EVENT_LISTENER_TYPES, FIT_CONTENT, LANGUAGES, OVERLAYS, PLATFORM, RENDER_DELAY } from '../../constants';
 import { AVATAR_SIZES } from '../Avatar/types';
-import { ReactComponent as ArrowDownIcon } from '../../assets/icons/avatar-arrow-down.svg';
-import { ReactComponent as ArrowUpIcon } from '../../assets/icons/avatar-arrow-up.svg';
 import { ReactComponent as LoaderIcon } from '../../assets/icons/avatar-loader.svg';
 import { ReactComponent as InfoIcon } from '../../assets/icons/chip-info.svg';
 import { ReactComponent as DeleteIcon } from '../../assets/icons/delete-chip.svg';
@@ -32,35 +35,109 @@ var CONTEXT_MENU_INDENT = CHIP_HEIGHT + CONTEXT_MENU_INDENT_TOP;
 var CHIP_PRESSED_CLASSNAME = 'smartapp-chip__pressed';
 var DELETE_ICON_PRESSED_CLASSNAME = 'smartapp-chip__right-icons--delete-icon__pressed';
 var ICON_TRANSITION = 'opacity 150ms ease-in-out';
+var BIG_RENDER_DELAY = 2 * RENDER_DELAY;
 var OPACITY_VALUES;
 (function (OPACITY_VALUES) {
     OPACITY_VALUES[OPACITY_VALUES["default"] = 1] = "default";
     OPACITY_VALUES[OPACITY_VALUES["loading"] = 0.5] = "loading";
 })(OPACITY_VALUES || (OPACITY_VALUES = {}));
+var ORGANIZER = (_a = {},
+    _a[LANGUAGES.ru] = 'организатор',
+    _a[LANGUAGES.en] = 'organizer',
+    _a[LANGUAGES.de] = 'veranstalter',
+    _a[LANGUAGES.es] = 'organizador',
+    _a[LANGUAGES.fr] = 'organisateur',
+    _a[LANGUAGES.ar] = 'منظم',
+    _a[LANGUAGES.ms] = 'pengurus',
+    _a[LANGUAGES.tr] = 'düzenleyici',
+    _a[LANGUAGES.id] = 'penyelenggara',
+    _a[LANGUAGES.uz] = 'tashkilotchi',
+    _a);
 var generateLoaderContainerStyles = function () { return ({ background: 'none' }); };
 var generateLoaderStyles = function () { return ({ width: 'fit-content', padding: 0 }); };
+var stopEvent = function (event) {
+    event.stopPropagation();
+    event.preventDefault();
+};
 var Chip = function (_a) {
-    var fontFamily = _a.fontFamily, _b = _a.language, language = _b === void 0 ? LANGUAGES.ru : _b, name = _a.name, email = _a.email, uid = _a.uid, avatar = _a.avatar, _c = _a.isAvatarHidden, isAvatarHidden = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isError, isError = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isWarning, isWarning = _g === void 0 ? false : _g, _h = _a.isEye, isEye = _h === void 0 ? false : _h, isMyContacts = _a.isMyContacts, isOutline = _a.isOutline, isOpenContextMenu = _a.isOpenContextMenu, userType = _a.userType, contextMenuItems = _a.contextMenuItems, className = _a.className, styles = _a.styles, iconColor = _a.iconColor, _j = _a.platform, platform = _j === void 0 ? PLATFORM.web : _j, onDelete = _a.onDelete, setIsOpenContextMenu = _a.setIsOpenContextMenu;
+    var fontFamily = _a.fontFamily, _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, _c = _a.language, language = _c === void 0 ? LANGUAGES.ru : _c, name = _a.name, organizerName = _a.organizerName, email = _a.email, uid = _a.uid, avatar = _a.avatar, _d = _a.isAvatarHidden, isAvatarHidden = _d === void 0 ? false : _d, _e = _a.isUserIconHidden, isUserIconHidden = _e === void 0 ? false : _e, _f = _a.isEmailMode, isEmailMode = _f === void 0 ? false : _f, _g = _a.isDisabled, isDisabled = _g === void 0 ? false : _g, _h = _a.isError, isError = _h === void 0 ? false : _h, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, _k = _a.isWarning, isWarning = _k === void 0 ? false : _k, _l = _a.isEye, isEye = _l === void 0 ? false : _l, isMyContacts = _a.isMyContacts, isOrganizerShort = _a.isOrganizerShort, isOutline = _a.isOutline, _m = _a.isDraggableLayer, isDraggableLayer = _m === void 0 ? false : _m, userType = _a.userType, inviteStatus = _a.inviteStatus, contextMenuItems = _a.contextMenuItems, className = _a.className, styles = _a.styles, iconColor = _a.iconColor, draggableData = _a.draggableData, dropdownId = _a.dropdownId, onDelete = _a.onDelete, setIsOpenContextMenu = _a.setIsOpenContextMenu;
     var chipRef = useRef(null);
     var deleteIconRef = useRef(null);
-    var _k = useState(false), isAvatarArrowVisible = _k[0], setIsAvatarArrowVisible = _k[1];
     var iconOpacity = useMemo(function () { return (isLoading ? OPACITY_VALUES.loading : OPACITY_VALUES.default); }, [isLoading]);
     var iconStyles = { opacity: iconOpacity, transition: ICON_TRANSITION };
     var userIcon = renderUserIcon({ userType: userType, isMyContacts: isMyContacts, style: iconStyles });
     var isContextMenuAvailable = !isEmpty(contextMenuItems);
     var isDeleteIconAvailable = !isDisabled && onDelete;
+    var chipId = "".concat(name, "-").concat(dropdownId);
+    var elementForRenderPortal = document.getElementById(OVERLAYS);
+    var selectRef = useRef(null);
+    var contextMenuJustOpened = useRef(false);
+    var _o = useState(false), isOpenContextMenuLocal = _o[0], setIsOpenContextMenuLocal = _o[1];
+    var handleCloseContextMenu = useCallback(function (shouldCloseDropdown) {
+        if (contextMenuJustOpened.current)
+            return;
+        setDragBlocked(false);
+        setIsOpenContextMenuLocal(false);
+        if (selectRef.current) {
+            selectRef.current._contextMenuOpen = false;
+            if (shouldCloseDropdown)
+                selectRef.current.blur();
+            else {
+                selectRef.current._preventBlur = true;
+                setTimeout(function () { return selectRef.current && (selectRef.current._preventBlur = false); }, BIG_RENDER_DELAY);
+            }
+        }
+        setIsOpenContextMenu === null || setIsOpenContextMenu === void 0 ? void 0 : setIsOpenContextMenu(false, !shouldCloseDropdown);
+    }, [setIsOpenContextMenu]);
+    useEffect(function () {
+        setDragBlocked(isOpenContextMenuLocal);
+    }, [isOpenContextMenuLocal]);
+    useEffect(function () {
+        var _a;
+        var selectRefCurrent = (_a = draggableData === null || draggableData === void 0 ? void 0 : draggableData.selectRef) === null || _a === void 0 ? void 0 : _a.current;
+        if (selectRefCurrent)
+            selectRef.current = selectRefCurrent;
+    }, [draggableData]);
     useEffect(function () {
         window.addEventListener(EVENT_LISTENER_TYPES.mouseup, handleMouseUp);
         return function () { return window.removeEventListener(EVENT_LISTENER_TYPES.mouseup, handleMouseUp); };
     }, []);
-    var handleMouseDown = function () { var _a; return !isLoading && isContextMenuAvailable && ((_a = chipRef.current) === null || _a === void 0 ? void 0 : _a.classList.add(CHIP_PRESSED_CLASSNAME)); };
-    var handleMouseEnter = function () { return isContextMenuAvailable && setIsAvatarArrowVisible(true); };
-    var handleMouseLeave = function () { return isContextMenuAvailable && setIsAvatarArrowVisible(false); };
+    useEffect(function () {
+        var handleClickOutside = function (_a) {
+            var target = _a.target;
+            var chipRefCurrent = chipRef.current;
+            if (isOpenContextMenuLocal && chipRefCurrent && !chipRefCurrent.contains(target))
+                handleCloseContextMenu(true);
+        };
+        document.addEventListener(EVENT_LISTENER_TYPES.mousedown, handleClickOutside);
+        document.addEventListener(EVENT_LISTENER_TYPES.touchend, handleClickOutside, { passive: true });
+        return function () {
+            document.removeEventListener(EVENT_LISTENER_TYPES.mousedown, handleClickOutside);
+            document.removeEventListener(EVENT_LISTENER_TYPES.touchend, handleClickOutside);
+        };
+    }, [isOpenContextMenuLocal, handleCloseContextMenu]);
+    var _p = useDraggable({
+        id: chipId,
+        data: { user: __assign(__assign({}, draggableData), { dropdownId: dropdownId }) },
+        disabled: isOpenContextMenuLocal,
+    }), attributes = _p.attributes, listeners = _p.listeners, setNodeRef = _p.setNodeRef, isDragging = _p.isDragging, setActivatorNodeRef = _p.setActivatorNodeRef;
+    var generateName = function () {
+        if (organizerName)
+            return isOrganizerShort ? organizerName : "".concat(organizerName, " <span>(").concat(ORGANIZER[language], ")</span>");
+        if (isEmailMode && email)
+            return email;
+        return name;
+    };
+    var handleMouseDown = function (event) {
+        var _a;
+        stopEvent(event);
+        !isLoading && isContextMenuAvailable && ((_a = chipRef.current) === null || _a === void 0 ? void 0 : _a.classList.add(CHIP_PRESSED_CLASSNAME));
+    };
     var handleDeleteIconMouseDown = function (event) {
         var _a;
         if (isLoading)
             return;
-        event.stopPropagation();
+        stopEvent(event);
         (_a = deleteIconRef.current) === null || _a === void 0 ? void 0 : _a.classList.add(DELETE_ICON_PRESSED_CLASSNAME);
     };
     var handleMouseUp = function () {
@@ -68,33 +145,105 @@ var Chip = function (_a) {
         (_a = chipRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove(CHIP_PRESSED_CLASSNAME);
         (_b = deleteIconRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove(DELETE_ICON_PRESSED_CLASSNAME);
     };
-    var handleDeleteClick = function (event) {
+    var handleRemoveClick = function (event) {
+        var type = event.type;
         event.stopPropagation();
-        event.preventDefault();
+        type !== EVENT_LISTENER_TYPES.touchend && event.preventDefault();
         !isLoading && (onDelete === null || onDelete === void 0 ? void 0 : onDelete(name));
     };
-    var handleOpenContextMenu = useCallback(function () { return isContextMenuAvailable && !isLoading && (setIsOpenContextMenu === null || setIsOpenContextMenu === void 0 ? void 0 : setIsOpenContextMenu(true)); }, [isContextMenuAvailable, isLoading, setIsOpenContextMenu]);
-    var handleCloseContextMenu = function () {
-        setIsOpenContextMenu === null || setIsOpenContextMenu === void 0 ? void 0 : setIsOpenContextMenu(false);
-        setIsAvatarArrowVisible(false);
-    };
+    var handleOpenContextMenu = useCallback(function () {
+        if (!isContextMenuAvailable || isLoading)
+            return;
+        contextMenuJustOpened.current = true;
+        setDragBlocked(true);
+        setIsOpenContextMenuLocal(true);
+        var selectElement = selectRef.current;
+        if (selectElement) {
+            var menuIsOpen = selectElement.state.menuIsOpen;
+            selectElement._preventBlur = true;
+            selectElement._contextMenuOpen = true;
+            if (!menuIsOpen)
+                setTimeout(function () { return selectElement.onMenuOpen(); }, RENDER_DELAY);
+            setTimeout(function () { return (selectElement._preventBlur = false); }, BIG_RENDER_DELAY);
+        }
+        setIsOpenContextMenu === null || setIsOpenContextMenu === void 0 ? void 0 : setIsOpenContextMenu(true);
+        setTimeout(function () { return (contextMenuJustOpened.current = false); }, BIG_RENDER_DELAY);
+    }, [isContextMenuAvailable, isLoading, setIsOpenContextMenu]);
     var setContextMenuPosition = useCallback(function () {
         var _a;
         var _b = ((_a = chipRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {}, _c = _b.left, left = _c === void 0 ? 0 : _c, _d = _b.top, top = _d === void 0 ? 0 : _d;
         return { x: left, y: top + CONTEXT_MENU_INDENT };
     }, [chipRef]);
-    var _l = useLongTap({ onLongTap: handleOpenContextMenu }), cancelPressTimer = _l.cancelPressTimer, startPressTimer = _l.startPressTimer;
+    var handleShortTap = useCallback(function () {
+        if (!isWebPlatform(platform) && !isOpenContextMenuLocal)
+            handleOpenContextMenu();
+    }, [isOpenContextMenuLocal, handleOpenContextMenu, platform]);
+    var handleDragStart = useCallback(function () { return setIsOpenContextMenuLocal(false); }, []);
+    var handlePressStart = useCallback(function () {
+        if (selectRef.current)
+            selectRef.current._preventBlur = true;
+    }, []);
+    var handlePressEnd = useCallback(function () {
+        if (selectRef.current)
+            setTimeout(function () { return (selectRef.current._preventBlur = false); }, BIG_RENDER_DELAY);
+    }, []);
+    var _q = useMobileLongTap({
+        onShortTap: handleShortTap,
+        onDragStart: handleDragStart,
+        onPressStart: handlePressStart,
+        onPressEnd: handlePressEnd,
+    }), startPressTimer = _q.startPressTimer, cancelPressTimer = _q.cancelPressTimer, handleTouchMove = _q.handleTouchMove, handleTouchEnd = _q.handleTouchEnd;
     var handleContextMenu = function (event) {
         if (!isWebPlatform(platform))
             return;
         event.preventDefault();
         handleOpenContextMenu();
     };
-    var renderAvatar = function () {
-        return isAvatarArrowVisible || isOpenContextMenu ? (_jsx("div", __assign({ className: classNames('smartapp-chip__info--avatar-arrow', { 'smartapp-chip__info--avatar-arrow__outline': isOutline }) }, { children: isOpenContextMenu ? _jsx(ArrowUpIcon, { color: COLORS.iconAccentPressed }) : _jsx(ArrowDownIcon, { color: COLORS.iconAccent }) }))) : (avatar);
-    };
-    var contextMenuHeader = (_jsxs("div", __assign({ className: "smartapp-chip__context-menu-header" }, { children: [_jsx(Avatar, { fontFamily: fontFamily, username: name, icon: generateAvatarIcon(userType), avatar: avatar, size: AVATAR_SIZES.size_32, isEye: isEye, outlineDefaultBackground: COLORS.chip }), _jsxs("div", __assign({ className: "smartapp-chip__context-menu-header__content" }, { children: [_jsxs("div", { children: [userIcon, _jsx("span", { children: name })] }), email && _jsx("div", { children: email })] }))] })));
-    return (_jsxs("div", __assign({ ref: chipRef, className: classNames('smartapp-chip', { 'smartapp-chip__outline': isOutline, 'smartapp-chip__loading': isLoading }, className), style: __assign(__assign({}, generateFontFamilyStyle(fontFamily)), styles), onContextMenu: handleContextMenu, onTouchStart: !isOpenContextMenu ? startPressTimer : undefined, onTouchEnd: cancelPressTimer, onTouchMove: cancelPressTimer, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [_jsxs("div", __assign({ className: "smartapp-chip__info" }, { children: [!isAvatarHidden && (_jsx("div", __assign({ className: "smartapp-chip__info--avatar" }, { children: isLoading ? (_jsx(Loader, { icon: _jsx(LoaderIcon, {}), color: COLORS.iconAccent, isLoader: true, iconSize: AVATAR_SIZES.size_20, styles: generateLoaderStyles(), containerStyles: generateLoaderContainerStyles(), isFullScreen: false })) : (_jsx(Avatar, { isTooltipAvailableOnEye: true, language: language, fontFamily: fontFamily, icon: !isAvatarArrowVisible && generateAvatarIcon(userType), username: name, isWarning: isWarning, avatar: renderAvatar(), size: AVATAR_SIZES.size_24, isEye: isEye, outlineDefaultBackground: COLORS.chip })) }))), userIcon, _jsx("p", __assign({ className: classNames('smartapp-chip__info--name', { 'smartapp-chip__info--name__loading': isLoading }) }, { children: name }))] })), (isError || isDeleteIconAvailable) && (_jsxs("div", __assign({ className: "smartapp-chip__right-icons" }, { children: [isError && _jsx(InfoIcon, { color: COLORS.iconNegative }), isDeleteIconAvailable && (_jsx("div", __assign({ ref: deleteIconRef, className: classNames('smartapp-chip__right-icons--delete-icon', { 'smartapp-chip__right-icons--delete-icon__loading': isLoading }), onClick: handleDeleteClick, onMouseDown: handleDeleteIconMouseDown }, { children: _jsx(DeleteIcon, { style: __assign({ color: generateColor(iconColor) }, iconStyles) }) })))] }))), contextMenuItems && (_jsx(ContextMenu, { isMenuOpen: !!isOpenContextMenu, fontFamily: fontFamily, position: setContextMenuPosition(), closeMenu: handleCloseContextMenu, items: contextMenuItems, actionData: uid || email, topSlot: contextMenuHeader, menuStyles: { width: FIT_CONTENT } }))] })));
+    var setChipRef = useCallback(function (node) {
+        setNodeRef(node);
+        chipRef.current = node;
+    }, [setNodeRef]);
+    var handleTouchStart = useCallback(function (event) {
+        if (!isOpenContextMenuLocal) {
+            event.stopPropagation();
+            startPressTimer(event);
+        }
+    }, [startPressTimer, isOpenContextMenuLocal]);
+    var handleTouchEndInternal = useCallback(function (event) {
+        event.stopPropagation();
+        handleTouchEnd();
+    }, [handleTouchEnd]);
+    var handleTouchMoveInternal = useCallback(function (event) {
+        if (!isOpenContextMenuLocal)
+            event.stopPropagation();
+        handleTouchMove(event);
+    }, [handleTouchMove, isOpenContextMenuLocal]);
+    var dragAttributes = !isOpenContextMenuLocal ? attributes : {};
+    var dragListeners = !isOpenContextMenuLocal ? listeners : {};
+    var contextMenuHeader = useMemo(function () { return (_jsxs("div", __assign({ className: "smartapp-chip__context-menu-header" }, { children: [_jsx(Avatar, { fontFamily: fontFamily, username: name, icon: generateAvatarIcon(userType), avatar: avatar, size: AVATAR_SIZES.size_32, isEye: isEye, outlineDefaultBackground: COLORS.chip }), _jsxs("div", __assign({ className: "smartapp-chip__context-menu-header__content" }, { children: [_jsxs("div", { children: [userIcon, _jsx("span", { children: name })] }), email && _jsx("div", { children: email })] }))] }))); }, [fontFamily, name, userType, avatar, isEye, userIcon, email]);
+    var contextMenuElement = useMemo(function () {
+        if (!contextMenuItems || !isOpenContextMenuLocal || !elementForRenderPortal)
+            return null;
+        return createPortal(_jsx(ContextMenu, { isMenuOpen: isOpenContextMenuLocal, fontFamily: fontFamily, position: setContextMenuPosition(), closeMenu: handleCloseContextMenu, items: contextMenuItems, actionData: uid || email || name, topSlot: contextMenuHeader, menuStyles: { width: FIT_CONTENT }, platform: platform }), elementForRenderPortal);
+    }, [
+        contextMenuItems,
+        isOpenContextMenuLocal,
+        elementForRenderPortal,
+        fontFamily,
+        setContextMenuPosition,
+        handleCloseContextMenu,
+        uid,
+        email,
+        name,
+        contextMenuHeader,
+        platform,
+    ]);
+    return (_jsxs("div", __assign({ className: classNames('smartapp-chip', {
+            'smartapp-chip__outline': isOutline,
+            'smartapp-chip__loading': isLoading,
+            'smartapp-chip__layer': isDraggableLayer,
+            'smartapp-chip__dragging': isDragging,
+        }, className), ref: setChipRef }, dragAttributes, { style: __assign(__assign({}, generateFontFamilyStyle(fontFamily)), styles), onContextMenu: handleContextMenu, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEndInternal, onTouchMove: handleTouchMoveInternal, onTouchCancel: cancelPressTimer, onMouseDown: handleMouseDown }, { children: [_jsxs("div", __assign({ className: classNames('smartapp-chip__info', { 'smartapp-chip__info--increased-gap': isUserIconHidden }) }, dragListeners, { ref: !isOpenContextMenuLocal ? setActivatorNodeRef : undefined }, { children: [!isAvatarHidden && (_jsx("div", __assign({ className: "smartapp-chip__info--avatar" }, { children: isLoading ? (_jsx(Loader, { icon: _jsx(LoaderIcon, {}), color: COLORS.iconAccent, isLoader: true, iconSize: AVATAR_SIZES.size_20, styles: generateLoaderStyles(), containerStyles: generateLoaderContainerStyles(), isFullScreen: false })) : (_jsx(Avatar, { isTooltipAvailableOnEye: true, language: language, fontFamily: fontFamily, icon: generateAvatarIcon(userType), username: name, isWarning: isWarning, avatar: avatar, size: AVATAR_SIZES.size_24, isEye: isEye, inviteStatus: inviteStatus, outlineDefaultBackground: isOutline ? COLORS.bgPopUp : COLORS.chip })) }))), !isUserIconHidden && userIcon, _jsx("p", { className: classNames('smartapp-chip__info--name', { 'smartapp-chip__info--name__loading': isLoading }), dangerouslySetInnerHTML: createSanitizedHtml(generateName()) })] })), (isError || isDeleteIconAvailable) && (_jsxs("div", __assign({ className: "smartapp-chip__right-icons" }, { children: [isError && _jsx(InfoIcon, { color: COLORS.iconNegative }), isDeleteIconAvailable && (_jsx("div", __assign({ ref: deleteIconRef, className: classNames('smartapp-chip__right-icons--delete-icon', { 'smartapp-chip__right-icons--delete-icon__loading': isLoading }), onClick: handleRemoveClick, onTouchEnd: handleRemoveClick, onMouseDown: handleDeleteIconMouseDown }, { children: _jsx(DeleteIcon, { style: __assign({ color: generateColor(iconColor) }, iconStyles) }) })))] }))), contextMenuElement] })));
 };
-export default Chip;
+export default memo(Chip);
 //# sourceMappingURL=Chip.js.map