@salutejs/plasma-new-hope 0.190.0-dev.0 → 0.191.0-canary.1550.11797632633.0

package/styled-components/es/components/Select/Select.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "target", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "disabled", "view", "size", "listOverflow", "listHeight", "listWidth", "contentLeft", "onScrollBottom", "chipView", "variant", "portal", "renderValue", "renderItem", "status", "onItemSelect", "separator", "closeAfterSelect"];
+var _excluded = ["value", "onChange", "target", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "disabled", "view", "size", "listOverflow", "listHeight", "listWidth", "contentLeft", "onScrollBottom", "chipView", "variant", "portal", "renderValue", "renderItem", "status", "onItemSelect", "separator", "closeAfterSelect", "isTargetAmount"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -8,17 +8,17 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useState, useReducer, useMemo, createContext, useLayoutEffect } from 'react';
-import { isEmpty, getPlacements } from '../../utils';
+import React, { forwardRef, useState, useReducer, useMemo, createContext, useLayoutEffect, useRef } from 'react';
+import { safeUseId } from '@salutejs/plasma-core';
+import { isEmpty } from '../../utils';
 import { useOutsideClick } from '../../hooks';
-import { useKeyNavigation } from './hooks/useKeyboardNavigation';
+import { useKeyNavigation, getItemByFocused } from './hooks/useKeyboardNavigation';
 import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, getView, getInitialValue } from './utils';
 import { Inner, Target } from './ui';
-import { pathReducer, focusedPathReducer, focusedChipIndexReducer } from './reducers';
+import { pathReducer, focusedPathReducer } from './reducers';
 import { usePathMaps } from './hooks/usePathMaps';
-import { StyledPopover, Ul, base, OuterLabel, HelperText } from './Select.styles';
-import { base as viewCSS } from './variations/_view/base';
-import { base as sizeCSS } from './variations/_size/base';
+import { Ul, base } from './Select.styles';
+import { FloatingPopover } from './FloatingPopover';
 export var Context = /*#__PURE__*/createContext({});
 
 /**
@@ -26,21 +26,21 @@ export var Context = /*#__PURE__*/createContext({});
  */
 export var selectRoot = function selectRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
+    var _getItemByFocused;
     var outerValue = props.value,
       outerOnChange = props.onChange,
       _props$target = props.target,
-      target = _props$target === void 0 ? 'textfield-like' : _props$target,
+      _target = _props$target === void 0 ? 'textfield-like' : _props$target,
       items = props.items,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
       label = props.label,
-      _props$labelPlacement = props.labelPlacement,
-      labelPlacement = _props$labelPlacement === void 0 ? 'outer' : _props$labelPlacement,
+      labelPlacement = props.labelPlacement,
       placeholder = props.placeholder,
       helperText = props.helperText,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      view = props.view,
+      outerView = props.view,
       size = props.size,
       listOverflow = props.listOverflow,
       listHeight = props.listHeight,
@@ -57,22 +57,28 @@ export var selectRoot = function selectRoot(Root) {
       onItemSelect = props.onItemSelect,
       separator = props.separator,
       outerCloseAfterSelect = props.closeAfterSelect,
+      isTargetAmount = props.isTargetAmount,
       rest = _objectWithoutProperties(props, _excluded);
     var transformedItems = useMemo(function () {
       return initialItemsTransform(items || []);
     }, [items]);
+
+    // Создаем структуры для быстрой работы с деревом
     var _usePathMaps = usePathMaps(transformedItems),
-      _usePathMaps2 = _slicedToArray(_usePathMaps, 4),
+      _usePathMaps2 = _slicedToArray(_usePathMaps, 5),
       pathMap = _usePathMaps2[0],
       focusedToValueMap = _usePathMaps2[1],
       valueToCheckedMap = _usePathMaps2[2],
-      valueToItemMap = _usePathMaps2[3];
-    var value = getInitialValue(outerValue, valueToItemMap);
-    var onChange = function onChange(e) {
-      if (outerOnChange) {
-        outerOnChange(e);
-      }
-    };
+      valueToItemMap = _usePathMaps2[3],
+      labelToItemMap = _usePathMaps2[4];
+    var _useState = useState(props.multiselect ? [] : ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      internalValue = _useState2[0],
+      setInternalValue = _useState2[1];
+    var value = outerValue !== null && outerValue !== undefined ? getInitialValue(outerValue, valueToItemMap) : internalValue;
+    var floatingPopoverRef = useRef(null);
+
+    // Состояния дерева элементов
     var _useReducer = useReducer(pathReducer, []),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       path = _useReducer2[0],
@@ -81,23 +87,53 @@ export var selectRoot = function selectRoot(Root) {
       _useReducer4 = _slicedToArray(_useReducer3, 2),
       focusedPath = _useReducer4[0],
       dispatchFocusedPath = _useReducer4[1];
-    var _useReducer5 = useReducer(focusedChipIndexReducer, null),
-      _useReducer6 = _slicedToArray(_useReducer5, 2),
-      focusedChipIndex = _useReducer6[0],
-      dispatchFocusedChipIndex = _useReducer6[1];
-    var _useState = useState(valueToCheckedMap),
-      _useState2 = _slicedToArray(_useState, 2),
-      checked = _useState2[0],
-      setChecked = _useState2[1];
+    var _useState3 = useState(valueToCheckedMap),
+      _useState4 = _slicedToArray(_useState3, 2),
+      checked = _useState4[0],
+      setChecked = _useState4[1];
+    var isCurrentListOpen = Boolean(path[0]);
+    var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
     var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
+    var treeId = safeUseId();
+    var view = _target === 'textfield-like' && disabled ? 'default' : getView(status, outerView);
     var targetRef = useOutsideClick(function () {
-      if (focusedChipIndex != null) {
-        dispatchFocusedChipIndex({
+      if (!isCurrentListOpen) {
+        return;
+      }
+      dispatchPath({
+        type: 'reset'
+      });
+      dispatchFocusedPath({
+        type: 'reset'
+      });
+    }, floatingPopoverRef);
+    var onChange = function onChange(newValue) {
+      if (outerOnChange) {
+        outerOnChange(newValue);
+      }
+      setInternalValue(newValue);
+    };
+    var handleClickArrow = function handleClickArrow() {
+      if (disabled) {
+        return;
+      }
+      if (isCurrentListOpen) {
+        dispatchPath({
           type: 'reset'
         });
+      } else {
+        dispatchPath({
+          type: 'opened_first_level'
+        });
+      }
+      dispatchFocusedPath({
+        type: 'reset'
+      });
+    };
+    var handleListToggle = function handleListToggle(opened) {
+      if (disabled) {
+        return;
       }
-    });
-    var handleToggle = function handleToggle(opened) {
       if (opened) {
         dispatchPath({
           type: 'opened_first_level'
@@ -109,39 +145,37 @@ export var selectRoot = function selectRoot(Root) {
         dispatchPath({
           type: 'reset'
         });
-        dispatchFocusedChipIndex({
-          type: 'reset'
-        });
       }
     };
     var handleCheckboxChange = function handleCheckboxChange(item) {
-      if (props.multiselect) {
-        var checkedCopy = new Map(checked);
-        if (!checkedCopy.get(item.value)) {
-          checkedCopy.set(item.value, true);
-          updateDescendants(item, checkedCopy, true);
-        } else {
-          checkedCopy.set(item.value, false);
-          updateDescendants(item, checkedCopy, false);
+      if (!props.multiselect) {
+        return;
+      }
+      var checkedCopy = new Map(checked);
+      if (!checkedCopy.get(item.value)) {
+        checkedCopy.set(item.value, true);
+        updateDescendants(item, checkedCopy, true);
+      } else {
+        checkedCopy.set(item.value, false);
+        updateDescendants(item, checkedCopy, false);
+      }
+      updateAncestors(item, checkedCopy);
+      var newValues = [];
+      valueToItemMap.forEach(function (item, key) {
+        if (checkedCopy.get(key)) {
+          newValues.push(item.value);
         }
-        updateAncestors(item, checkedCopy);
-        var newValues = [];
-        valueToItemMap.forEach(function (item, key) {
-          if (checkedCopy.get(key)) {
-            newValues.push(item.value);
-          }
+      });
+      if (closeAfterSelect) {
+        dispatchPath({
+          type: 'reset'
         });
-        if (closeAfterSelect) {
-          dispatchPath({
-            type: 'reset'
-          });
-          dispatchFocusedPath({
-            type: 'reset'
-          });
-        }
-        if (onChange) {
-          onChange(newValues);
-        }
+        dispatchFocusedPath({
+          type: 'reset'
+        });
+      }
+      if (onChange) {
+        onChange(newValues);
       }
     };
     var handleItemClick = function handleItemClick(item, e) {
@@ -150,29 +184,26 @@ export var selectRoot = function selectRoot(Root) {
       }
       if (props.multiselect) {
         handleCheckboxChange(item);
-      } else {
-        if (e) {
-          e.stopPropagation();
-        }
-        var isCurrentChecked = checked.get(item.value);
-        if (closeAfterSelect) {
-          dispatchPath({
-            type: 'reset'
-          });
-          dispatchFocusedPath({
-            type: 'reset'
-          });
-        }
-        if (onChange) {
-          onChange(isCurrentChecked ? '' : item.value);
-        }
-        if (onItemSelect) {
-          onItemSelect(item, e);
-        }
+        return;
+      }
+      if (e) {
+        e.stopPropagation();
+      }
+      var isCurrentChecked = checked.get(item.value);
+      if (closeAfterSelect) {
+        dispatchPath({
+          type: 'reset'
+        });
+        dispatchFocusedPath({
+          type: 'reset'
+        });
+      }
+      if (onChange) {
+        onChange(isCurrentChecked ? '' : item.value);
+      }
+      if (onItemSelect) {
+        onItemSelect(item, e);
       }
-    };
-    var handleChipClick = function handleChipClick(currentValue) {
-      handleCheckboxChange(valueToItemMap.get(currentValue));
     };
     var handlePressDown = function handlePressDown(item, e) {
       if (isEmpty(item.items)) {
@@ -189,25 +220,19 @@ export var selectRoot = function selectRoot(Root) {
       }
     };
     var _useKeyNavigation = useKeyNavigation({
-        value: value,
         focusedPath: focusedPath,
         dispatchFocusedPath: dispatchFocusedPath,
         path: path,
         dispatchPath: dispatchPath,
         pathMap: pathMap,
         focusedToValueMap: focusedToValueMap,
-        handleToggle: handleToggle,
-        handlePressDown: handlePressDown,
-        focusedChipIndex: focusedChipIndex,
-        dispatchFocusedChipIndex: dispatchFocusedChipIndex,
-        valueToItemMap: valueToItemMap,
-        multiselect: props.multiselect,
-        isTargetAmount: props.isTargetAmount
+        handleListToggle: handleListToggle,
+        handlePressDown: handlePressDown
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
-    var isCurrentListOpen = Boolean(path[0]);
 
-    // В данном эффекте мы следим за изменениями value и вносим коррективы в дерево чекбоксов.
+    // В данном эффекте мы следим за изменениями value снаружи и вносим коррективы в дерево чекбоксов.
+    // Пример: когда юзер очистил value извне, тогда нужно пройтись по элементам и выключить все чекбоксы.
     useLayoutEffect(function () {
       var checkedCopy = new Map(checked);
       checkedCopy.forEach(function (_, key) {
@@ -226,13 +251,18 @@ export var selectRoot = function selectRoot(Root) {
         }
       }
       setChecked(checkedCopy);
-    }, [outerValue, items]);
+
+      // В deps мы кладем именно outerValue и internalValue, а не просто value.
+      // Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
+      // А переменную, содержащую сложные типы данных, нельзя помещать в deps.
+    }, [outerValue, internalValue, items]);
     return /*#__PURE__*/React.createElement(Root, _extends({
-      ref: ref,
+      view: view,
       size: size,
-      view: status ? getView(status) : view,
-      chipView: chipView
-    }, rest), label && labelPlacement === 'outer' && target !== 'button-like' && /*#__PURE__*/React.createElement(OuterLabel, null, label), /*#__PURE__*/React.createElement(Context.Provider, {
+      labelPlacement: labelPlacement,
+      chipView: chipView,
+      disabled: disabled
+    }, rest), /*#__PURE__*/React.createElement(Context.Provider, {
       value: {
         focusedPath: focusedPath,
         checked: checked,
@@ -242,46 +272,63 @@ export var selectRoot = function selectRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
-        valueToItemMap: valueToItemMap
+        valueToItemMap: valueToItemMap,
+        treeId: treeId
       }
-    }, /*#__PURE__*/React.createElement(StyledPopover, {
-      ref: targetRef,
+    }, /*#__PURE__*/React.createElement(FloatingPopover, {
+      ref: floatingPopoverRef,
       opened: isCurrentListOpen,
-      placement: getPlacements(placement),
-      usePortal: Boolean(portal),
-      frame: portal,
-      onToggle: handleToggle,
-      trigger: "click",
-      target: /*#__PURE__*/React.createElement(Target, {
-        opened: isCurrentListOpen,
-        value: value,
-        valueToItemMap: valueToItemMap,
-        focusedPath: focusedPath,
-        focusedToValueMap: focusedToValueMap,
-        onChipClick: handleChipClick,
-        label: label,
-        placeholder: placeholder,
-        onKeyDown: onKeyDown,
-        focusedChipIndex: focusedChipIndex,
-        labelPlacement: labelPlacement,
-        selectProps: props,
-        size: size,
-        contentLeft: contentLeft,
-        disabled: disabled,
-        renderValue: renderValue
-      }),
-      preventOverflow: false,
-      closeOnOverlayClick: true,
-      listWidth: listWidth
-    }, items && /*#__PURE__*/React.createElement(Root, _extends({
-      size: size
+      onToggle: function onToggle(opened) {
+        return opened && handleListToggle(true);
+      },
+      placement: placement,
+      portal: portal,
+      listWidth: listWidth,
+      target: function target(referenceRef) {
+        return /*#__PURE__*/React.createElement(Target, {
+          ref: ref,
+          target: _target,
+          value: value,
+          opened: isCurrentListOpen,
+          valueToItemMap: valueToItemMap,
+          label: label,
+          placeholder: placeholder,
+          onKeyDown: onKeyDown,
+          labelPlacement: labelPlacement,
+          size: size,
+          contentLeft: contentLeft,
+          disabled: disabled,
+          renderValue: renderValue,
+          selectProps: props,
+          inputWrapperRef: referenceRef,
+          multiselect: props.multiselect,
+          view: view,
+          handleClickArrow: handleClickArrow,
+          helperText: helperText,
+          treeId: treeId,
+          activeDescendantItemValue: activeDescendantItemValue,
+          isTargetAmount: isTargetAmount,
+          onChange: onChange,
+          labelToItemMap: labelToItemMap,
+          chipView: chipView,
+          separator: separator
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Root, _extends({
+      view: view,
+      size: size,
+      labelPlacement: labelPlacement,
+      chipView: chipView,
+      disabled: disabled
     }, rest), /*#__PURE__*/React.createElement(Ul, {
       role: "tree",
-      id: "tree_level_1",
+      id: "".concat(treeId, "_tree_level_1"),
+      "aria-multiselectable": Boolean(props.multiselect),
       listHeight: listHeight,
       listOverflow: listOverflow,
       onScroll: handleScroll,
-      listWidth: listWidth
+      listWidth: listWidth,
+      ref: targetRef
     }, transformedItems.map(function (item, index) {
       return /*#__PURE__*/React.createElement(Inner, {
         key: "".concat(index, "/0"),
@@ -292,7 +339,7 @@ export var selectRoot = function selectRoot(Root) {
         index: index,
         listWidth: listWidth
       });
-    }))))), helperText && target === 'textfield-like' && /*#__PURE__*/React.createElement(HelperText, null, helperText));
+    }))))));
   });
 };
 export var selectConfig = {
@@ -300,17 +347,11 @@ export var selectConfig = {
   tag: 'div',
   layout: selectRoot,
   base: base,
-  variations: {
-    view: {
-      css: viewCSS
-    },
-    size: {
-      css: sizeCSS
-    }
-  },
+  variations: {},
   defaults: {
     view: 'default',
-    chipView: 'default',
-    size: 'm'
+    size: 'm',
+    labelPlacement: 'outer',
+    chipView: 'default'
   }
 };

package/styled-components/es/components/Select/Select.styles.js

@@ -1,35 +1,20 @@
 import styled from 'styled-components';
 import { css } from 'styled-components';
-import { component } from '../../engines';
-import { popoverClasses, popoverConfig } from '../Popover';
 import { getCorrectHeight } from './utils';
 import { tokens, constants } from './Select.tokens';
-var Popover = /*#__PURE__*/component(popoverConfig);
-export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
+export var Ul = /*#__PURE__*/styled.ul.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-0"
-})([".", "{width:", ";}.", "{width:100%;}"], /*#__PURE__*/String(popoverClasses.root), function (_ref) {
+})(["box-sizing:border-box;background:var(", ");box-shadow:", ",inset 0 0 0 var(", ",0rem) var(", ",transparent);border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:calc(var(", ") + var(", ",0rem)) 0;"], constants.background, constants.boxShadow, tokens.dropdownBorderWidth, tokens.dropdownBorderColor, tokens.borderRadius, function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
-}, /*#__PURE__*/String(popoverClasses.target));
-export var Ul = /*#__PURE__*/styled.ul.withConfig({
-  componentId: "plasma-new-hope__sc-le54jv-1"
-})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";border:var(", ") solid var(", ");margin:", ";padding:var(", ");"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref2) {
-  var listWidth = _ref2.listWidth;
-  return listWidth || '100%';
-}, function (_ref3) {
-  var listHeight = _ref3.listHeight;
+}, function (_ref2) {
+  var listHeight = _ref2.listHeight;
   return listHeight ? getCorrectHeight(listHeight) : 'auto';
-}, function (_ref4) {
-  var listOverflow = _ref4.listOverflow;
+}, function (_ref3) {
+  var listOverflow = _ref3.listOverflow;
   return listOverflow || 'initial';
-}, tokens.popoverBorderWidth, tokens.popoverBorderColor, function (_ref5) {
-  var isInnerUl = _ref5.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 var(").concat(tokens.padding, ")") : 0;
-}, tokens.padding);
-export var base = /*#__PURE__*/css([".", ",.", "{display:block;}"], popoverClasses.wrapper, popoverClasses.target);
-export var OuterLabel = /*#__PURE__*/styled.label.withConfig({
-  componentId: "plasma-new-hope__sc-le54jv-2"
-})(["display:block;margin-bottom:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelOffset, constants.textfieldOuterLabelColor, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelFontLetterSpacing, tokens.labelFontLineHeight);
-export var HelperText = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-le54jv-3"
-})(["margin-top:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.helperTextOffset, tokens.helperTextColor, tokens.helperTextFontFamily, tokens.helperTextFontSize, tokens.helperTextFontStyle, tokens.helperTextFontWeight, tokens.helperTextFontLetterSpacing, tokens.helperTextFontLineHeight);
+}, function (_ref4) {
+  var isInnerUl = _ref4.isInnerUl;
+  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 0") : 0;
+}, tokens.padding, tokens.dropdownBorderWidth);
+export var base = /*#__PURE__*/css([""]);