@salutejs/plasma-new-hope 0.335.0-canary.2194.17367251959.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/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");