@salutejs/plasma-new-hope 0.335.0-canary.2191.17321424209.0 → 0.335.0-canary.2196.17375511532.0

package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js

@@ -19,13 +19,12 @@ _export(exports, {
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _plasmacore = require("@salutejs/plasma-core");
 var _utils = require("../../../utils");
-var _utils1 = require("../../../utils");
 var _hooks = require("../../../hooks");
-var _utils2 = require("../../Select/utils");
+var _utils1 = require("../../Select/utils");
 var _Comboboxtokens = require("./Combobox.tokens");
 var _FloatingPopover = require("./FloatingPopover");
 var _useKeyboardNavigation = require("./hooks/useKeyboardNavigation");
-var _utils3 = require("./utils");
+var _utils2 = require("./utils");
 var _ui = require("./ui");
 var _reducers = require("./reducers");
 var _getPathMaps = require("./hooks/getPathMaps");
@@ -218,7 +217,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var comboboxRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
-        var _valueToItemMap_get, _getItemByFocused;
+        var _getItemByFocused;
         var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, onScroll = props.onScroll, onToggle = props.onToggle, // @ts-ignore
         _offset = props._offset, rest = _object_without_properties(props, [
             "name",
@@ -266,7 +265,7 @@ var comboboxRoot = function(Root) {
             "_offset"
         ]);
         var transformedItems = (0, _react.useMemo)(function() {
-            return (0, _utils3.initialItemsTransform)(items || []);
+            return (0, _utils2.initialItemsTransform)(items || []);
         }, [
             items
         ]);
@@ -276,7 +275,7 @@ var comboboxRoot = function(Root) {
         }, [
             items
         ]), 3), valueToCheckedMap = _useMemo[0], valueToItemMap = _useMemo[1], labelToItemMap = _useMemo[2];
-        var _useState = _sliced_to_array((0, _react.useState)(multiple || Array.isArray(outerValue) ? '' : ((_valueToItemMap_get = valueToItemMap.get(outerValue)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || (outerValue === null || outerValue === void 0 ? void 0 : outerValue.toString()) || ''), 2), textValue = _useState[0], setTextValue = _useState[1];
+        var _useState = _sliced_to_array((0, _react.useState)((0, _utils2.getTextValue)(multiple, outerValue, valueToItemMap, renderValue)), 2), textValue = _useState[0], setTextValue = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)(multiple ? [] : ''), 2), internalValue = _useState1[0], setInternalValue = _useState1[1];
         var value = outerValue !== null && outerValue !== undefined ? outerValue : internalValue;
         var inputRef = (0, _react.useRef)(null);
@@ -284,8 +283,7 @@ var comboboxRoot = function(Root) {
         var inputForkRef = (0, _plasmacore.useForkRef)(inputRef, ref);
         var treeId = (0, _utils.safeUseId)();
         var filteredItems = (0, _react.useMemo)(function() {
-            var _valueToItemMap_get;
-            return (0, _utils3.filterItems)(transformedItems, textValue, ((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || value, filter);
+            return (0, _utils2.filterItems)(transformedItems, textValue, (0, _utils2.getTextValue)(multiple, value, valueToItemMap, renderValue), filter);
         }, [
             transformedItems,
             textValue,
@@ -322,30 +320,19 @@ var comboboxRoot = function(Root) {
             if (onToggle) {
                 onToggle(false);
             }
-            // Проверяем, отличается ли значение в инпуте от выбранного value после закрытия дропдауна.
-            // Если изменилось, то возвращаем label выбранного айтема.
-            // Если нет выбранного элемента, то стираем значение инпута.
-            if (textValue !== value) {
-                if ((0, _utils1.isEmpty)(value)) {
-                    setTextValue('');
-                } else if (multiple) {
-                    setTextValue('');
-                } else {
-                    var _valueToItemMap_get;
-                    setTextValue(((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || value || '');
-                }
-            }
+            // Возвращаем актуальное значение поля ввода после закрытия выпадающего списка.
+            setTextValue((0, _utils2.getTextValue)(multiple, value, valueToItemMap, renderValue));
         }, floatingPopoverRef);
         // Эта функция срабатывает при изменении Combobox и
         // при изменении нативного Select для формы (срабатывает только после изменения internalValue и рендера).
         var onChange = function(newValue, item) {
             // Условие для отправки изменений наружу
             if (props.onChange) {
-                // Условие для отправки если комбобокс используется без формы.
+                // Условие для отправки, если комбобокс используется без формы.
                 if (!props.name && (typeof newValue === 'string' || Array.isArray(newValue))) {
                     props.onChange(newValue, item || null);
                 }
-                // Условие для отправки если комбобокс используется с формой.
+                // Условие для отправки, если комбобокс используется с формой.
                 if (props.name && (typeof newValue === "undefined" ? "undefined" : _type_of(newValue)) === 'object' && !Array.isArray(newValue)) {
                     props.onChange(newValue);
                 }
@@ -404,7 +391,7 @@ var comboboxRoot = function(Root) {
                         resultValues.splice(index, 1);
                     }
                 });
-                var removedItemValue = (0, _utils3.getRemovedElement)(value, resultValues, isTargetAmount);
+                var removedItemValue = (0, _utils2.getRemovedElement)(value, resultValues, isTargetAmount);
                 onChange(resultValues, removedItemValue ? valueToItemMap.get(removedItemValue) || {
                     value: removedItemValue,
                     label: removedItemValue.toString()
@@ -414,7 +401,7 @@ var comboboxRoot = function(Root) {
                     var _labelToItemMap_get;
                     return ((_labelToItemMap_get = labelToItemMap.get(chipLabel)) === null || _labelToItemMap_get === void 0 ? void 0 : _labelToItemMap_get.value) || chipLabel;
                 });
-                var removedItemValue1 = (0, _utils3.getRemovedElement)(value, newValues, isTargetAmount);
+                var removedItemValue1 = (0, _utils2.getRemovedElement)(value, newValues, isTargetAmount);
                 onChange(newValues, removedItemValue1 ? valueToItemMap.get(removedItemValue1) || {
                     value: removedItemValue1,
                     label: removedItemValue1.toString()
@@ -450,12 +437,12 @@ var comboboxRoot = function(Root) {
             var checkedCopy = new Map(checked);
             if (!checkedCopy.get(item.value)) {
                 checkedCopy.set(item.value, true);
-                (0, _utils3.updateDescendants)(item, checkedCopy, true, valueToItemMap);
+                (0, _utils2.updateDescendants)(item, checkedCopy, true, valueToItemMap);
             } else {
                 checkedCopy.set(item.value, false);
-                (0, _utils3.updateDescendants)(item, checkedCopy, false);
+                (0, _utils2.updateDescendants)(item, checkedCopy, false);
             }
-            (0, _utils3.updateAncestors)(item, checkedCopy);
+            (0, _utils2.updateAncestors)(item, checkedCopy);
             var newValues = [];
             valueToItemMap.forEach(function(item, key) {
                 if (checkedCopy.get(key)) {
@@ -484,7 +471,7 @@ var comboboxRoot = function(Root) {
         };
         // Обработчик клика по айтему выпадающего списка
         var handleItemClick = function(item, e) {
-            if (!(0, _utils1.isEmpty)(item === null || item === void 0 ? void 0 : item.items)) {
+            if (!(0, _utils.isEmpty)(item === null || item === void 0 ? void 0 : item.items)) {
                 return;
             }
             if (multiple) {
@@ -530,7 +517,7 @@ var comboboxRoot = function(Root) {
             return [];
         };
         var handlePressDown = function(item, e) {
-            if ((0, _utils1.isEmpty)(item.items)) {
+            if ((0, _utils.isEmpty)(item.items)) {
                 handleItemClick(item, e);
             } else if (multiple) {
                 handleCheckboxChange(item);
@@ -561,14 +548,14 @@ var comboboxRoot = function(Root) {
             checkedCopy.forEach(function(_, key) {
                 checkedCopy.set(key, false);
             });
-            if (!(0, _utils1.isEmpty)(value)) {
+            if (!(0, _utils.isEmpty)(value)) {
                 if (Array.isArray(value)) {
                     value.forEach(function(val) {
                         // Только если value находится в items, т.к. value может и не существовать в items.
                         if (valueToItemMap.has(val)) {
                             checkedCopy.set(val, true);
-                            (0, _utils3.updateDescendants)(valueToItemMap.get(val), checkedCopy, true);
-                            (0, _utils3.updateAncestors)(valueToItemMap.get(val), checkedCopy);
+                            (0, _utils2.updateDescendants)(valueToItemMap.get(val), checkedCopy, true);
+                            (0, _utils2.updateAncestors)(valueToItemMap.get(val), checkedCopy);
                         }
                     });
                 } else {
@@ -576,15 +563,11 @@ var comboboxRoot = function(Root) {
                     // eslint-disable-next-line no-lonely-if
                     if (valueToItemMap.has(value)) {
                         checkedCopy.set(value, 'done');
-                        (0, _utils3.updateSingleAncestors)(valueToItemMap.get(value), checkedCopy, 'dot');
+                        (0, _utils2.updateSingleAncestors)(valueToItemMap.get(value), checkedCopy, 'dot');
                     }
                 }
             }
             setChecked(checkedCopy);
-            if (!multiple && textValue === value && valueToItemMap.has(value)) {
-                var _valueToItemMap_get;
-                setTextValue(((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || '');
-            }
         // В deps мы кладем именно outerValue и internalValue, а не просто value.
         // Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
         // А переменную, содержащую сложные типы данных, нельзя помещать в deps.
@@ -594,9 +577,8 @@ var comboboxRoot = function(Root) {
             items
         ]);
         // При изменении value нужно возвращать значение в инпуте к исходному.
-        (0, _react.useLayoutEffect)(function() {
-            var _valueToItemMap_get;
-            setTextValue(multiple ? '' : ((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || (value === null || value === void 0 ? void 0 : value.toString()) || '');
+        (0, _hooks.useDidMountLayoutEffect)(function() {
+            setTextValue((0, _utils2.getTextValue)(multiple, value, valueToItemMap, renderValue));
         }, [
             outerValue,
             internalValue
@@ -667,7 +649,7 @@ var comboboxRoot = function(Root) {
                         onClick: handleClickArrow
                     }, /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.StyledArrow, {
                         color: "inherit",
-                        size: (0, _utils2.sizeToIconSize)(size),
+                        size: (0, _utils1.sizeToIconSize)(size),
                         className: withArrowInverse
                     })),
                     textBefore: textBefore,
@@ -680,7 +662,7 @@ var comboboxRoot = function(Root) {
                     "aria-autocomplete": "list",
                     "aria-controls": "".concat(treeId, "_tree_level_1"),
                     "aria-expanded": isCurrentListOpen,
-                    "aria-activedescendant": activeDescendantItemValue ? (0, _utils3.getItemId)(treeId, activeDescendantItemValue) : '',
+                    "aria-activedescendant": activeDescendantItemValue ? (0, _utils2.getItemId)(treeId, activeDescendantItemValue) : '',
                     labelPlacement: labelPlacement,
                     keepPlaceholder: keepPlaceholder
                 }, multiple ? {
@@ -713,7 +695,7 @@ var comboboxRoot = function(Root) {
             virtual: virtual,
             listOverflow: listOverflow,
             onScroll: virtual ? undefined : onScroll
-        }, beforeList, (0, _utils1.isEmpty)(filteredItems) ? /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.StyledEmptyState, {
+        }, beforeList, (0, _utils.isEmpty)(filteredItems) ? /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.StyledEmptyState, {
             className: _Comboboxtokens.classes.emptyStateWrapper,
             size: size,
             description: emptyStateDescription || 'Ничего не найдено'

package/emotion/cjs/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js

@@ -8,33 +8,101 @@ Object.defineProperty(exports, "VirtualList", {
         return VirtualList;
     }
 });
-var _react = /*#__PURE__*/ _interop_require_default(require("react"));
-var _rcvirtuallist = /*#__PURE__*/ _interop_require_default(require("rc-virtual-list"));
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _reactvirtual = require("@tanstack/react-virtual");
 var _utils = require("../../../../../utils");
 var _ui = require("../Inner/ui");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 var VirtualList = function(param) {
     var items = param.items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll;
-    return /*#__PURE__*/ _react.default.createElement(_rcvirtuallist.default, {
-        data: items,
-        height: (0, _utils.getHeightAsNumber)(listMaxHeight),
-        fullHeight: false,
-        itemHeight: 100,
-        itemKey: "id",
+    var _virtualItems_;
+    var parentRef = (0, _react.useRef)(null);
+    var virtualizer = (0, _reactvirtual.useVirtualizer)({
+        count: items.length,
+        getScrollElement: function() {
+            return parentRef.current;
+        },
+        estimateSize: function() {
+            return 48;
+        }
+    });
+    var virtualItems = virtualizer.getVirtualItems();
+    var _virtualItems__start;
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        ref: parentRef,
+        style: {
+            height: 'auto',
+            maxHeight: (0, _utils.getHeightAsNumber)(listMaxHeight),
+            overflowY: 'auto'
+        },
         onScroll: onScroll
-    }, function(item, index, props) {
-        return /*#__PURE__*/ _react.default.createElement("div", props, /*#__PURE__*/ _react.default.createElement(_ui.Item, {
-            item: item,
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        style: {
+            height: virtualizer.getTotalSize(),
+            width: '100%',
+            position: 'relative'
+        }
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            transform: "translateY(".concat((_virtualItems__start = (_virtualItems_ = virtualItems[0]) === null || _virtualItems_ === void 0 ? void 0 : _virtualItems_.start) !== null && _virtualItems__start !== void 0 ? _virtualItems__start : 0, "px)")
+        }
+    }, virtualItems.map(function(virtualRow) {
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            key: virtualRow.key,
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement
+        }, /*#__PURE__*/ _react.default.createElement(_ui.Item, {
+            item: items[virtualRow.index],
             path: [
                 'root'
             ],
             currentLevel: 0,
-            index: index,
+            index: virtualRow.index,
             ariaLevel: 1
         }));
-    });
+    }))));
 };

package/emotion/cjs/components/Combobox/ComboboxNew/utils/getTextValue.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getTextValue", {
+    enumerable: true,
+    get: function() {
+        return getTextValue;
+    }
+});
+// Type Guard для multiple.
+// @ts-ignore
+function isMultiple(multiple, value) {
+    return Boolean(multiple);
+}
+var getTextValue = function(multiple, value, valueToItemMap, renderValue) {
+    var _valueToItemMap_get;
+    if (isMultiple(multiple, value) || !value) {
+        return '';
+    }
+    return (renderValue === null || renderValue === void 0 ? void 0 : renderValue({
+        value: value,
+        label: ''
+    })) || ((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || value.toString();
+};

package/emotion/cjs/components/Combobox/ComboboxNew/utils/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     get getRemovedElement () {
         return _getRemovedElement.getRemovedElement;
     },
+    get getTextValue () {
+        return _getTextValue.getTextValue;
+    },
     get initialItemsTransform () {
         return _initialItemsTransform.initialItemsTransform;
     },
@@ -42,3 +45,4 @@ var _sizeToIconSize = require("./sizeToIconSize");
 var _filterItems = require("./filterItems");
 var _getItemId = require("./getItemId");
 var _getRemovedElement = require("./getRemovedElement");
+var _getTextValue = require("./getTextValue");

package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -205,7 +205,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var datePickerRangeRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
-        var className = _param.className, autoComplete = _param.autoComplete, _param_isDoubleCalendar = _param.isDoubleCalendar, isDoubleCalendar = _param_isDoubleCalendar === void 0 ? false : _param_isDoubleCalendar, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, _param_defaultFirstDate = _param.defaultFirstDate, defaultFirstDate = _param_defaultFirstDate === void 0 ? '' : _param_defaultFirstDate, _param_defaultSecondDate = _param.defaultSecondDate, defaultSecondDate = _param_defaultSecondDate === void 0 ? '' : _param_defaultSecondDate, preserveInvalidOnBlur = _param.preserveInvalidOnBlur, label = _param.label, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, name = _param.name, _param_dividerVariant = _param.dividerVariant, dividerVariant = _param_dividerVariant === void 0 ? 'dash' : _param_dividerVariant, dividerIcon = _param.dividerIcon, firstValueError = _param.firstValueError, secondValueError = _param.secondValueError, firstValueSuccess = _param.firstValueSuccess, secondValueSuccess = _param.secondValueSuccess, firstPlaceholder = _param.firstPlaceholder, secondPlaceholder = _param.secondPlaceholder, firstTextfieldContentLeft = _param.firstTextfieldContentLeft, firstTextfieldContentRight = _param.firstTextfieldContentRight, secondTextfieldContentLeft = _param.secondTextfieldContentLeft, secondTextfieldContentRight = _param.secondTextfieldContentRight, firstTextfieldTextBefore = _param.firstTextfieldTextBefore, secondTextfieldTextBefore = _param.secondTextfieldTextBefore, firstTextfieldTextAfter = _param.firstTextfieldTextAfter, secondTextfieldTextAfter = _param.secondTextfieldTextAfter, required = _param.required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, _param_format = _param.format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, _param_placement = _param.placement, placement = _param_placement === void 0 ? [
+        var className = _param.className, autoComplete = _param.autoComplete, _param_isDoubleCalendar = _param.isDoubleCalendar, isDoubleCalendar = _param_isDoubleCalendar === void 0 ? false : _param_isDoubleCalendar, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, _param_defaultFirstDate = _param.defaultFirstDate, defaultFirstDate = _param_defaultFirstDate === void 0 ? '' : _param_defaultFirstDate, _param_defaultSecondDate = _param.defaultSecondDate, defaultSecondDate = _param_defaultSecondDate === void 0 ? '' : _param_defaultSecondDate, preserveInvalidOnBlur = _param.preserveInvalidOnBlur, label = _param.label, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, name = _param.name, _param_dividerVariant = _param.dividerVariant, dividerVariant = _param_dividerVariant === void 0 ? 'dash' : _param_dividerVariant, dividerIcon = _param.dividerIcon, firstValueError = _param.firstValueError, secondValueError = _param.secondValueError, firstValueSuccess = _param.firstValueSuccess, secondValueSuccess = _param.secondValueSuccess, firstPlaceholder = _param.firstPlaceholder, secondPlaceholder = _param.secondPlaceholder, firstTextfieldContentLeft = _param.firstTextfieldContentLeft, firstTextfieldContentRight = _param.firstTextfieldContentRight, secondTextfieldContentLeft = _param.secondTextfieldContentLeft, secondTextfieldContentRight = _param.secondTextfieldContentRight, firstTextfieldTextBefore = _param.firstTextfieldTextBefore, secondTextfieldTextBefore = _param.secondTextfieldTextBefore, firstTextfieldTextAfter = _param.firstTextfieldTextAfter, secondTextfieldTextAfter = _param.secondTextfieldTextAfter, required = _param.required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, _param_format = _param.format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, zIndex = _param.zIndex, _param_placement = _param.placement, placement = _param_placement === void 0 ? [
             'top',
             'bottom'
         ] : _param_placement, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeAfterDateSelect = _param.closeAfterDateSelect, closeAfterDateSelect = _param_closeAfterDateSelect === void 0 ? true : _param_closeAfterDateSelect, offset = _param.offset, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, stretched = _param.stretched, onToggle = _param.onToggle, onChange = _param.onChange, onChangeFirstValue = _param.onChangeFirstValue, onChangeSecondValue = _param.onChangeSecondValue, onCommitFirstDate = _param.onCommitFirstDate, onCommitSecondDate = _param.onCommitSecondDate, onFocusFirstTextfield = _param.onFocusFirstTextfield, onFocusSecondTextfield = _param.onFocusSecondTextfield, onBlurFirstTextfield = _param.onBlurFirstTextfield, onBlurSecondTextfield = _param.onBlurSecondTextfield, rest = _object_without_properties(_param, [
@@ -263,6 +263,7 @@ var datePickerRangeRoot = function(Root) {
             "type",
             "frame",
             "usePortal",
+            "zIndex",
             "placement",
             "closeOnOverlayClick",
             "closeOnEsc",
@@ -632,6 +633,7 @@ var datePickerRangeRoot = function(Root) {
             renderFromDate: renderFromDate,
             frame: frame,
             usePortal: usePortal,
+            zIndex: zIndex,
             placement: placement,
             closeOnOverlayClick: closeOnOverlayClick,
             closeOnEsc: closeOnEsc,

package/emotion/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js

@@ -74,7 +74,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 var RangeDatePopover = function(param) {
-    var Root = param.rootWrapper, target = param.target, isOpen = param.isOpen, opened = param.opened, isDoubleCalendar = param.isDoubleCalendar, calendarValue = param.calendarValue, min = param.min, max = param.max, renderFromDate = param.renderFromDate, includeEdgeDates = param.includeEdgeDates, eventList = param.eventList, disabledList = param.disabledList, eventMonthList = param.eventMonthList, disabledMonthList = param.disabledMonthList, eventQuarterList = param.eventQuarterList, disabledQuarterList = param.disabledQuarterList, eventYearList = param.eventYearList, disabledYearList = param.disabledYearList, _param_frame = param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, _param_placement = param.placement, placement = _param_placement === void 0 ? [
+    var Root = param.rootWrapper, target = param.target, isOpen = param.isOpen, opened = param.opened, isDoubleCalendar = param.isDoubleCalendar, calendarValue = param.calendarValue, min = param.min, max = param.max, renderFromDate = param.renderFromDate, includeEdgeDates = param.includeEdgeDates, eventList = param.eventList, disabledList = param.disabledList, eventMonthList = param.eventMonthList, disabledMonthList = param.disabledMonthList, eventQuarterList = param.eventQuarterList, disabledQuarterList = param.disabledQuarterList, eventYearList = param.eventYearList, disabledYearList = param.disabledYearList, _param_frame = param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, zIndex = param.zIndex, _param_placement = param.placement, placement = _param_placement === void 0 ? [
         'top',
         'bottom'
     ] : _param_placement, _param_closeOnOverlayClick = param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, closeOnEsc = param.closeOnEsc, offset = param.offset, calendarContainerWidth = param.calendarContainerWidth, calendarContainerHeight = param.calendarContainerHeight, stretched = param.stretched, type = param.type, size = param.size, _param_lang = param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, disabled = param.disabled, readOnly = param.readOnly, setIsInnerOpen = param.setIsInnerOpen, onChangeValue = param.onChangeValue, onChangeStartOfRange = param.onChangeStartOfRange, onToggle = param.onToggle;
@@ -107,7 +107,8 @@ var RangeDatePopover = function(param) {
             closeOnOverlayClick: closeOnOverlayClick,
             isFocusTrapped: false,
             target: target,
-            preventOverflow: false
+            preventOverflow: false,
+            zIndex: zIndex
         }, /*#__PURE__*/ _react.default.createElement(Root, {
             ref: doubleCalendarRootRef,
             className: (0, _classnames.default)(_DatePickertokens.classes.datePickerRoot, _define_property({}, _DatePickertokens.classes.datePickerstretched, stretched)),
@@ -148,7 +149,8 @@ var RangeDatePopover = function(param) {
         isFocusTrapped: false,
         target: target,
         preventOverflow: false,
-        closeOnEsc: closeOnEsc
+        closeOnEsc: closeOnEsc,
+        zIndex: zIndex
     }, /*#__PURE__*/ _react.default.createElement(Root, {
         ref: calendarRootRef,
         className: (0, _classnames.default)(_DatePickertokens.classes.datePickerRoot, _define_property({}, _DatePickertokens.classes.datePickerstretched, stretched)),

package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -179,7 +179,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var datePickerRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
-        var className = _param.className, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, _param_defaultDate = _param.defaultDate, defaultDate = _param_defaultDate === void 0 ? '' : _param_defaultDate, preserveInvalidOnBlur = _param.preserveInvalidOnBlur, label = _param.label, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'outer' : _param_labelPlacement, keepPlaceholder = _param.keepPlaceholder, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, placeholder = _param.placeholder, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, name = _param.name, valueError = _param.valueError, valueSuccess = _param.valueSuccess, _param_format = _param.format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, _param_placement = _param.placement, placement = _param_placement === void 0 ? [
+        var className = _param.className, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, _param_defaultDate = _param.defaultDate, defaultDate = _param_defaultDate === void 0 ? '' : _param_defaultDate, preserveInvalidOnBlur = _param.preserveInvalidOnBlur, label = _param.label, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'outer' : _param_labelPlacement, keepPlaceholder = _param.keepPlaceholder, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, placeholder = _param.placeholder, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, name = _param.name, valueError = _param.valueError, valueSuccess = _param.valueSuccess, _param_format = _param.format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, zIndex = _param.zIndex, _param_placement = _param.placement, placement = _param_placement === void 0 ? [
             'top',
             'bottom'
         ] : _param_placement, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeAfterDateSelect = _param.closeAfterDateSelect, closeAfterDateSelect = _param_closeAfterDateSelect === void 0 ? true : _param_closeAfterDateSelect, offset = _param.offset, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, stretched = _param.stretched, onChangeValue = _param.onChangeValue, onCommitDate = _param.onCommitDate, onToggle = _param.onToggle, onFocus = _param.onFocus, onBlur = _param.onBlur, onChange = _param.onChange, autoComplete = _param.autoComplete, rest = _object_without_properties(_param, [
@@ -225,6 +225,7 @@ var datePickerRoot = function(Root) {
             "type",
             "frame",
             "usePortal",
+            "zIndex",
             "placement",
             "closeOnOverlayClick",
             "closeOnEsc",
@@ -412,7 +413,8 @@ var datePickerRoot = function(Root) {
             closeOnOverlayClick: closeOnOverlayClick,
             isFocusTrapped: false,
             target: DatePickerInput,
-            preventOverflow: false
+            preventOverflow: false,
+            zIndex: zIndex
         }, /*#__PURE__*/ _react.default.createElement(Root, {
             ref: calendarRootRef,
             view: view,

package/emotion/cjs/components/Popup/Popup.js

@@ -21,9 +21,11 @@ _export(exports, {
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _plasmacore = require("@salutejs/plasma-core");
+var _reactdraggable = /*#__PURE__*/ _interop_require_default(require("react-draggable"));
+var _reresizable = require("re-resizable");
 var _utils = require("../../utils");
 var _Portal = require("../Portal");
-var _ui = require("./ui");
+var _utils1 = require("./utils");
 var _PopupRoot = require("./PopupRoot");
 var _hooks = require("./hooks");
 var _Popuptokens = require("./Popup.tokens");
@@ -49,6 +51,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -248,7 +255,12 @@ var popupRoot = function(Root) {
             "draggable",
             "resizable"
         ]);
+        var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
+        var nodeRef = (0, _react.useRef)(null);
         var innerIsOpen = isOpen || opened;
+        var resizable = typeof outerResizable === 'boolean' ? {
+            disabled: !outerResizable
+        } : outerResizable;
         var uniqId = (0, _utils.safeUseId)();
         var innerId = id || uniqId;
         var _usePopup = (0, _hooks.usePopup)({
@@ -259,11 +271,22 @@ var popupRoot = function(Root) {
         }), isVisible = _usePopup.isVisible, animationInfo = _usePopup.animationInfo, setVisible = _usePopup.setVisible, rootId = _usePopup.rootId;
         var portalRef = (0, _react.useRef)(null);
         var contentRef = (0, _react.useRef)(null);
+        var resizableContainer = (0, _react.useRef)(null);
         var innerRef = (0, _plasmacore.useForkRef)(contentRef, outerRootRef);
         if (!isVisible && !innerIsOpen) {
             return null;
         }
         var cls = (0, _utils.cx)(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? _Popuptokens.classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? _Popuptokens.classes.endTransition : '');
+        var handleResizeStart = function() {
+            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+                resizableContainer.current.resizable.classList.toggle(_Popuptokens.classes.resizableContainerNoSelect);
+            }
+        };
+        var handleResizeStop = function() {
+            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+                resizableContainer.current.resizable.classList.toggle(_Popuptokens.classes.resizableContainerNoSelect);
+            }
+        };
         var rootNode = /*#__PURE__*/ _react.default.createElement(Root, {
             className: cls
         }, overlay, /*#__PURE__*/ _react.default.createElement(_PopupRoot.PopupRoot, _object_spread({
@@ -274,12 +297,51 @@ var popupRoot = function(Root) {
             frame: frame,
             animationInfo: animationInfo,
             setVisible: setVisible
-        }, rest), /*#__PURE__*/ _react.default.createElement(_ui.Draggable, {
-            draggable: draggable
-        }, /*#__PURE__*/ _react.default.createElement(_ui.Resizable, {
-            resizable: outerResizable,
-            placement: placement
-        }, children))));
+        }, rest), /*#__PURE__*/ _react.default.createElement(_reactdraggable.default, {
+            nodeRef: nodeRef,
+            defaultClassName: draggable ? _Popuptokens.classes.draggablePopupWrapper : undefined,
+            defaultClassNameDragging: draggable ? _Popuptokens.classes.draggingPopupWrapper : undefined,
+            disabled: !draggable,
+            cancel: ".".concat(_Popuptokens.classes.resizableHandleWrapper)
+        }, /*#__PURE__*/ _react.default.createElement("div", {
+            ref: nodeRef
+        }, /*#__PURE__*/ _react.default.createElement(_reresizable.Resizable, {
+            ref: resizableContainer,
+            enable: resizable && !resizable.disabled ? (0, _utils1.getResizeDirections)(resizable.directions) : false,
+            resizeRatio: (0, _utils1.getRatioBasedOnPlacement)(placement),
+            defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
+            minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
+            minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
+            maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
+            maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
+            onResizeStart: handleResizeStart,
+            onResizeStop: handleResizeStop,
+            handleComponent: {
+                topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableTopRightIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableBottomRightIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableBottomLeftIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableTopLeftIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                }))
+            },
+            className: _Popuptokens.classes.resizableContainer,
+            handleStyles: (0, _utils1.getHandleStyles)(),
+            handleWrapperClass: _Popuptokens.classes.resizableHandleWrapper
+        }, children)))));
         if (typeof frame !== 'string' && frame && frame.current && _utils.canUseDOM) {
             return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
                 container: frame.current