@salutejs/plasma-new-hope 0.192.0-canary.1550.11799501370.0 → 0.192.0-dev.0

package/styled-components/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js

@@ -35,6 +35,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
     focusedToValueMap = _ref.focusedToValueMap,
     handleListToggle = _ref.handleListToggle,
     handlePressDown = _ref.handlePressDown,
+    multiselect = _ref.multiselect,
     setTextValue = _ref.setTextValue;
   var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
   var currentLength = pathMap.get(path === null || path === void 0 ? void 0 : path[focusedPath.length - 1]) || 0;
@@ -129,6 +130,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
               break;
             }
             var currentItem = getItemByFocused(focusedPath, focusedToValueMap);
+            console.log('currentItem', currentItem, focusedPath, focusedToValueMap);
             if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
               if (path.length > focusedPath.length) {
                 dispatchFocusedPath({
@@ -145,6 +147,32 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
           }
           break;
         }
+      case keys.Backspace:
+        {
+          if (!multiselect) break;
+          break;
+        }
+
+      // case keys.Space: {
+      //     event.preventDefault();
+      //
+      //     const currentItem = getItemByFocused(focusedPath, focusedToValueMap);
+      //
+      //     if (!path[0]) {
+      //         dispatchPath({ type: 'opened_first_level' });
+      //         dispatchFocusedPath({ type: 'set_initial_focus' });
+      //         break;
+      //     }
+      //
+      //     if (!currentItem || currentItem?.disabled) {
+      //         break;
+      //     }
+      //
+      //     handlePressDown(currentItem);
+      //
+      //     break;
+      // }
+
       case keys.Enter:
         {
           event.preventDefault();
@@ -161,13 +189,23 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
             });
             break;
           }
+
+          // if (currentItem?.items) {
+          //     if (path.length > focusedPath.length) {
+          //         dispatchFocusedPath({ type: 'add_focus', value: 0 });
+          //     } else {
+          //         dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });
+          //     }
+          //
+          //     break;
+          // }
+
           if (_currentItem) {
             handlePressDown(_currentItem);
           }
           break;
         }
       case keys.Tab:
-      case keys.Escape:
         {
           dispatchPath({
             type: 'reset'
@@ -179,6 +217,17 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
           setTextValue('');
           break;
         }
+      case keys.Escape:
+        {
+          dispatchPath({
+            type: 'reset'
+          });
+          dispatchFocusedPath({
+            type: 'reset'
+          });
+          handleListToggle(false);
+          break;
+        }
       case keys.Home:
         {
           if (path[0]) {

package/styled-components/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js

@@ -16,7 +16,7 @@ var SelectPerPageRoot = exports.SelectPerPageRoot = /*#__PURE__*/_styledComponen
 })(["display:flex;align-items:center;gap:0.5rem;"]);
 var SelectPerPageSelect = exports.SelectPerPageSelect = /*#__PURE__*/(0, _styledComponents["default"])(Select).withConfig({
   componentId: "plasma-new-hope__sc-1g304l9-1"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":0.125rem;", ":var(", ");", ":calc(var(", ") - 0.125rem);", ":0 0.375rem 0 0;", ":1.5rem;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Select.selectTokens.buttonColor, _Pagination.tokens.buttonColor, _Select.selectTokens.buttonColorHover, _Pagination.tokens.buttonColorHover, _Select.selectTokens.buttonColorActive, _Pagination.tokens.buttonColorActive, _Select.selectTokens.buttonBackgroundColor, _Pagination.tokens.buttonBackgroundColor, _Select.selectTokens.buttonBackgroundColorHover, _Pagination.tokens.buttonBackgroundColorHover, _Select.selectTokens.buttonBackgroundColorActive, _Pagination.tokens.buttonBackgroundColorActive, _Select.selectTokens.targetHeight, _Pagination.tokens.buttonHeight, _Select.selectTokens.buttonPadding, _Pagination.tokens.selectTargetPadding, _Select.selectTokens.borderRadius, _Pagination.tokens.buttonRadius, _Select.selectTokens.buttonArrowColor, _Pagination.tokens.buttonArrowColor, _Select.selectTokens.buttonArrowColorHover, _Pagination.tokens.buttonArrowColorHover, _Select.selectTokens.buttonArrowColorActive, _Pagination.tokens.buttonArrowColorActive, _Select.selectTokens.buttonArrowMargin, _Pagination.tokens.buttonArrowMargin, _Select.selectTokens.padding, _Select.selectTokens.itemPadding, _Pagination.tokens.selectItemPadding, _Select.selectTokens.itemBorderRadius, _Pagination.tokens.buttonRadius, _Select.selectTokens.itemIconMargin, _Select.selectTokens.itemIconSize, _Select.selectTokens.itemHeight, _Pagination.tokens.selectItemHeight, _Select.selectTokens.fontFamily, _Pagination.tokens.paginationFontFamily, _Select.selectTokens.fontSize, _Pagination.tokens.paginationFontSize, _Select.selectTokens.fontStyle, _Pagination.tokens.paginationFontStyle, _Select.selectTokens.fontWeight, _Pagination.tokens.paginationFontWeight, _Select.selectTokens.fontLetterSpacing, _Pagination.tokens.paginationLetterSpacing, _Select.selectTokens.fontLineHeight, _Pagination.tokens.paginationLineHeight);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":0.125rem;", ":0.125rem;", ":var(", ");", ":calc(var(", ") - 0.125rem);", ":0 0.375rem 0 0;", ":1.5rem;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Select.selectTokens.targetButtonColor, _Pagination.tokens.buttonColor, _Select.selectTokens.targetButtonColorHover, _Pagination.tokens.buttonColorHover, _Select.selectTokens.targetButtonColorActive, _Pagination.tokens.buttonColorActive, _Select.selectTokens.targetButtonBackgroundColor, _Pagination.tokens.buttonBackgroundColor, _Select.selectTokens.targetButtonBackgroundColorHover, _Pagination.tokens.buttonBackgroundColorHover, _Select.selectTokens.targetButtonBackgroundColorActive, _Pagination.tokens.buttonBackgroundColorActive, _Select.selectTokens.targetHeight, _Pagination.tokens.buttonHeight, _Select.selectTokens.targetButtonPadding, _Pagination.tokens.selectTargetPadding, _Select.selectTokens.borderRadius, _Pagination.tokens.buttonRadius, _Select.selectTokens.targetButtonArrowColor, _Pagination.tokens.buttonArrowColor, _Select.selectTokens.targetButtonArrowColorHover, _Pagination.tokens.buttonArrowColorHover, _Select.selectTokens.targetButtonArrowColorActive, _Pagination.tokens.buttonArrowColorActive, _Select.selectTokens.targetButtonArrowMargin, _Pagination.tokens.buttonArrowMargin, _Select.selectTokens.padding, _Select.selectTokens.focusOffset, _Select.selectTokens.itemPadding, _Pagination.tokens.selectItemPadding, _Select.selectTokens.itemBorderRadius, _Pagination.tokens.buttonRadius, _Select.selectTokens.itemIconMargin, _Select.selectTokens.itemIconSize, _Select.selectTokens.itemHeight, _Pagination.tokens.selectItemHeight, _Select.selectTokens.fontFamily, _Pagination.tokens.paginationFontFamily, _Select.selectTokens.fontSize, _Pagination.tokens.paginationFontSize, _Select.selectTokens.fontStyle, _Pagination.tokens.paginationFontStyle, _Select.selectTokens.fontWeight, _Pagination.tokens.paginationFontWeight, _Select.selectTokens.fontLetterSpacing, _Pagination.tokens.paginationLetterSpacing, _Select.selectTokens.fontLineHeight, _Pagination.tokens.paginationLineHeight);
 var SelectPerPageTypography = exports.SelectPerPageTypography = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1g304l9-2"
 })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Pagination.tokens.paginationFontFamily, _Pagination.tokens.paginationFontSize, _Pagination.tokens.paginationFontStyle, _Pagination.tokens.paginationFontWeight, _Pagination.tokens.paginationLetterSpacing, _Pagination.tokens.paginationLineHeight);

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectRoot = exports.selectConfig = exports.Context = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
-var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _utils = /*#__PURE__*/require("../../utils");
 var _hooks = /*#__PURE__*/require("../../hooks");
 var _useKeyboardNavigation = /*#__PURE__*/require("./hooks/useKeyboardNavigation");
@@ -15,8 +14,9 @@ var _ui = /*#__PURE__*/require("./ui");
 var _reducers = /*#__PURE__*/require("./reducers");
 var _usePathMaps3 = /*#__PURE__*/require("./hooks/usePathMaps");
 var _Select = /*#__PURE__*/require("./Select.styles");
-var _FloatingPopover = /*#__PURE__*/require("./FloatingPopover");
-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"];
+var _base = /*#__PURE__*/require("./variations/_view/base");
+var _base2 = /*#__PURE__*/require("./variations/_size/base");
+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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -35,21 +35,21 @@ var Context = exports.Context = /*#__PURE__*/(0, _react.createContext)({});
  */
 var selectRoot = exports.selectRoot = function selectRoot(Root) {
   return /*#__PURE__*/(0, _react.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,
-      labelPlacement = props.labelPlacement,
+      _props$labelPlacement = props.labelPlacement,
+      labelPlacement = _props$labelPlacement === void 0 ? 'outer' : _props$labelPlacement,
       placeholder = props.placeholder,
       helperText = props.helperText,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      outerView = props.view,
+      view = props.view,
       size = props.size,
       listOverflow = props.listOverflow,
       listHeight = props.listHeight,
@@ -66,28 +66,22 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       onItemSelect = props.onItemSelect,
       separator = props.separator,
       outerCloseAfterSelect = props.closeAfterSelect,
-      isTargetAmount = props.isTargetAmount,
       rest = _objectWithoutProperties(props, _excluded);
     var transformedItems = (0, _react.useMemo)(function () {
       return (0, _utils2.initialItemsTransform)(items || []);
     }, [items]);
-
-    // Создаем структуры для быстрой работы с деревом
     var _usePathMaps = (0, _usePathMaps3.usePathMaps)(transformedItems),
-      _usePathMaps2 = _slicedToArray(_usePathMaps, 5),
+      _usePathMaps2 = _slicedToArray(_usePathMaps, 4),
       pathMap = _usePathMaps2[0],
       focusedToValueMap = _usePathMaps2[1],
       valueToCheckedMap = _usePathMaps2[2],
-      valueToItemMap = _usePathMaps2[3],
-      labelToItemMap = _usePathMaps2[4];
-    var _useState = (0, _react.useState)(props.multiselect ? [] : ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      internalValue = _useState2[0],
-      setInternalValue = _useState2[1];
-    var value = outerValue !== null && outerValue !== undefined ? (0, _utils2.getInitialValue)(outerValue, valueToItemMap) : internalValue;
-    var floatingPopoverRef = (0, _react.useRef)(null);
-
-    // Состояния дерева элементов
+      valueToItemMap = _usePathMaps2[3];
+    var value = (0, _utils2.getInitialValue)(outerValue, valueToItemMap);
+    var onChange = function onChange(e) {
+      if (outerOnChange) {
+        outerOnChange(e);
+      }
+    };
     var _useReducer = (0, _react.useReducer)(_reducers.pathReducer, []),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       path = _useReducer2[0],
@@ -96,53 +90,23 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       _useReducer4 = _slicedToArray(_useReducer3, 2),
       focusedPath = _useReducer4[0],
       dispatchFocusedPath = _useReducer4[1];
-    var _useState3 = (0, _react.useState)(valueToCheckedMap),
-      _useState4 = _slicedToArray(_useState3, 2),
-      checked = _useState4[0],
-      setChecked = _useState4[1];
-    var isCurrentListOpen = Boolean(path[0]);
-    var activeDescendantItemValue = ((_getItemByFocused = (0, _useKeyboardNavigation.getItemByFocused)(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
+    var _useReducer5 = (0, _react.useReducer)(_reducers.focusedChipIndexReducer, null),
+      _useReducer6 = _slicedToArray(_useReducer5, 2),
+      focusedChipIndex = _useReducer6[0],
+      dispatchFocusedChipIndex = _useReducer6[1];
+    var _useState = (0, _react.useState)(valueToCheckedMap),
+      _useState2 = _slicedToArray(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
     var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
-    var treeId = (0, _plasmaCore.safeUseId)();
-    var view = _target === 'textfield-like' && disabled ? 'default' : (0, _utils2.getView)(status, outerView);
     var targetRef = (0, _hooks.useOutsideClick)(function () {
-      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({
+      if (focusedChipIndex != null) {
+        dispatchFocusedChipIndex({
           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'
@@ -154,37 +118,39 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         dispatchPath({
           type: 'reset'
         });
+        dispatchFocusedChipIndex({
+          type: 'reset'
+        });
       }
     };
     var handleCheckboxChange = function handleCheckboxChange(item) {
-      if (!props.multiselect) {
-        return;
-      }
-      var checkedCopy = new Map(checked);
-      if (!checkedCopy.get(item.value)) {
-        checkedCopy.set(item.value, true);
-        (0, _utils2.updateDescendants)(item, checkedCopy, true);
-      } else {
-        checkedCopy.set(item.value, false);
-        (0, _utils2.updateDescendants)(item, checkedCopy, false);
-      }
-      (0, _utils2.updateAncestors)(item, checkedCopy);
-      var newValues = [];
-      valueToItemMap.forEach(function (item, key) {
-        if (checkedCopy.get(key)) {
-          newValues.push(item.value);
+      if (props.multiselect) {
+        var checkedCopy = new Map(checked);
+        if (!checkedCopy.get(item.value)) {
+          checkedCopy.set(item.value, true);
+          (0, _utils2.updateDescendants)(item, checkedCopy, true);
+        } else {
+          checkedCopy.set(item.value, false);
+          (0, _utils2.updateDescendants)(item, checkedCopy, false);
         }
-      });
-      if (closeAfterSelect) {
-        dispatchPath({
-          type: 'reset'
-        });
-        dispatchFocusedPath({
-          type: 'reset'
+        (0, _utils2.updateAncestors)(item, checkedCopy);
+        var newValues = [];
+        valueToItemMap.forEach(function (item, key) {
+          if (checkedCopy.get(key)) {
+            newValues.push(item.value);
+          }
         });
-      }
-      if (onChange) {
-        onChange(newValues);
+        if (closeAfterSelect) {
+          dispatchPath({
+            type: 'reset'
+          });
+          dispatchFocusedPath({
+            type: 'reset'
+          });
+        }
+        if (onChange) {
+          onChange(newValues);
+        }
       }
     };
     var handleItemClick = function handleItemClick(item, e) {
@@ -193,27 +159,30 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       }
       if (props.multiselect) {
         handleCheckboxChange(item);
-        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);
+      } 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);
+        }
       }
     };
+    var handleChipClick = function handleChipClick(currentValue) {
+      handleCheckboxChange(valueToItemMap.get(currentValue));
+    };
     var handlePressDown = function handlePressDown(item, e) {
       if ((0, _utils.isEmpty)(item.items)) {
         handleItemClick(item, e);
@@ -229,19 +198,25 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       }
     };
     var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
+        value: value,
         focusedPath: focusedPath,
         dispatchFocusedPath: dispatchFocusedPath,
         path: path,
         dispatchPath: dispatchPath,
         pathMap: pathMap,
         focusedToValueMap: focusedToValueMap,
-        handleListToggle: handleListToggle,
-        handlePressDown: handlePressDown
+        handleToggle: handleToggle,
+        handlePressDown: handlePressDown,
+        focusedChipIndex: focusedChipIndex,
+        dispatchFocusedChipIndex: dispatchFocusedChipIndex,
+        valueToItemMap: valueToItemMap,
+        multiselect: props.multiselect,
+        isTargetAmount: props.isTargetAmount
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
+    var isCurrentListOpen = Boolean(path[0]);
 
-    // В данном эффекте мы следим за изменениями value снаружи и вносим коррективы в дерево чекбоксов.
-    // Пример: когда юзер очистил value извне, тогда нужно пройтись по элементам и выключить все чекбоксы.
+    // В данном эффекте мы следим за изменениями value и вносим коррективы в дерево чекбоксов.
     (0, _react.useLayoutEffect)(function () {
       var checkedCopy = new Map(checked);
       checkedCopy.forEach(function (_, key) {
@@ -260,18 +235,13 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         }
       }
       setChecked(checkedCopy);
-
-      // В deps мы кладем именно outerValue и internalValue, а не просто value.
-      // Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
-      // А переменную, содержащую сложные типы данных, нельзя помещать в deps.
-    }, [outerValue, internalValue, items]);
+    }, [outerValue, items]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
-      view: view,
+      ref: ref,
       size: size,
-      labelPlacement: labelPlacement,
-      chipView: chipView,
-      disabled: disabled
-    }, rest), /*#__PURE__*/_react["default"].createElement(Context.Provider, {
+      view: status ? (0, _utils2.getView)(status) : view,
+      chipView: chipView
+    }, rest), label && labelPlacement === 'outer' && target !== 'button-like' && /*#__PURE__*/_react["default"].createElement(_Select.OuterLabel, null, label), /*#__PURE__*/_react["default"].createElement(Context.Provider, {
       value: {
         focusedPath: focusedPath,
         checked: checked,
@@ -281,63 +251,46 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
-        valueToItemMap: valueToItemMap,
-        treeId: treeId
+        valueToItemMap: valueToItemMap
       }
-    }, /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
-      ref: floatingPopoverRef,
+    }, /*#__PURE__*/_react["default"].createElement(_Select.StyledPopover, {
+      ref: targetRef,
       opened: isCurrentListOpen,
-      onToggle: function onToggle(opened) {
-        return opened && handleListToggle(true);
-      },
-      placement: placement,
-      portal: portal,
-      listWidth: listWidth,
-      target: function target(referenceRef) {
-        return /*#__PURE__*/_react["default"].createElement(_ui.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["default"].createElement(Root, _extends({
-      view: view,
-      size: size,
-      labelPlacement: labelPlacement,
-      chipView: chipView,
-      disabled: disabled
+      placement: (0, _utils.getPlacements)(placement),
+      usePortal: Boolean(portal),
+      frame: portal,
+      onToggle: handleToggle,
+      trigger: "click",
+      target: /*#__PURE__*/_react["default"].createElement(_ui.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["default"].createElement(Root, _extends({
+      size: size
     }, rest), /*#__PURE__*/_react["default"].createElement(_Select.Ul, {
       role: "tree",
-      id: "".concat(treeId, "_tree_level_1"),
-      "aria-multiselectable": Boolean(props.multiselect),
+      id: "tree_level_1",
       listHeight: listHeight,
       listOverflow: listOverflow,
       onScroll: handleScroll,
-      listWidth: listWidth,
-      ref: targetRef
+      listWidth: listWidth
     }, transformedItems.map(function (item, index) {
       return /*#__PURE__*/_react["default"].createElement(_ui.Inner, {
         key: "".concat(index, "/0"),
@@ -348,7 +301,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         index: index,
         listWidth: listWidth
       });
-    }))))));
+    }))))), helperText && target === 'textfield-like' && /*#__PURE__*/_react["default"].createElement(_Select.HelperText, null, helperText));
   });
 };
 var selectConfig = exports.selectConfig = {
@@ -356,11 +309,17 @@ var selectConfig = exports.selectConfig = {
   tag: 'div',
   layout: selectRoot,
   base: _Select.base,
-  variations: {},
+  variations: {
+    view: {
+      css: _base.base
+    },
+    size: {
+      css: _base2.base
+    }
+  },
   defaults: {
     view: 'default',
-    size: 'm',
-    labelPlacement: 'outer',
-    chipView: 'default'
+    chipView: 'default',
+    size: 'm'
   }
 };

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

@@ -4,25 +4,40 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.Ul = void 0;
+exports.base = exports.Ul = exports.StyledPopover = exports.OuterLabel = exports.HelperText = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
+var _engines = /*#__PURE__*/require("../../engines");
+var _Popover = /*#__PURE__*/require("../Popover");
 var _utils = /*#__PURE__*/require("./utils");
 var _Select = /*#__PURE__*/require("./Select.tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+var Popover = /*#__PURE__*/(0, _engines.component)(_Popover.popoverConfig);
+var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["default"])(Popover).withConfig({
   componentId: "plasma-new-hope__sc-le54jv-0"
-})(["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;"], _Select.constants.background, _Select.constants.boxShadow, _Select.tokens.dropdownBorderWidth, _Select.tokens.dropdownBorderColor, _Select.tokens.borderRadius, function (_ref) {
+})([".", "{width:", ";}.", "{width:100%;}"], /*#__PURE__*/String(_Popover.popoverClasses.root), function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
-}, function (_ref2) {
-  var listHeight = _ref2.listHeight;
-  return listHeight ? (0, _utils.getCorrectHeight)(listHeight) : 'auto';
+}, /*#__PURE__*/String(_Popover.popoverClasses.target));
+var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].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(", ");"], _Select.constants.background, _Select.constants.boxShadow, _Select.tokens.borderRadius, function (_ref2) {
+  var listWidth = _ref2.listWidth;
+  return listWidth || '100%';
 }, function (_ref3) {
-  var listOverflow = _ref3.listOverflow;
-  return listOverflow || 'initial';
+  var listHeight = _ref3.listHeight;
+  return listHeight ? (0, _utils.getCorrectHeight)(listHeight) : 'auto';
 }, function (_ref4) {
-  var isInnerUl = _ref4.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(_Select.tokens.padding, ") * -1) 0 0 0") : 0;
-}, _Select.tokens.padding, _Select.tokens.dropdownBorderWidth);
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
+  var listOverflow = _ref4.listOverflow;
+  return listOverflow || 'initial';
+}, _Select.tokens.popoverBorderWidth, _Select.tokens.popoverBorderColor, function (_ref5) {
+  var isInnerUl = _ref5.isInnerUl;
+  return isInnerUl ? "calc(var(".concat(_Select.tokens.padding, ") * -1) 0 0 var(").concat(_Select.tokens.padding, ")") : 0;
+}, _Select.tokens.padding);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", ",.", "{display:block;}"], _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target);
+var OuterLabel = exports.OuterLabel = /*#__PURE__*/_styledComponents["default"].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(", ");"], _Select.tokens.labelOffset, _Select.constants.textfieldOuterLabelColor, _Select.tokens.labelFontFamily, _Select.tokens.labelFontSize, _Select.tokens.labelFontStyle, _Select.tokens.labelFontWeight, _Select.tokens.labelFontLetterSpacing, _Select.tokens.labelFontLineHeight);
+var HelperText = exports.HelperText = /*#__PURE__*/_styledComponents["default"].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(", ");"], _Select.tokens.helperTextOffset, _Select.tokens.helperTextColor, _Select.tokens.helperTextFontFamily, _Select.tokens.helperTextFontSize, _Select.tokens.helperTextFontStyle, _Select.tokens.helperTextFontWeight, _Select.tokens.helperTextFontLetterSpacing, _Select.tokens.helperTextFontLineHeight);