@salutejs/plasma-new-hope 0.189.0-canary.1550.11793426836.0 → 0.189.0-dev.0

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

@@ -29,6 +29,7 @@ export var 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;
@@ -123,6 +124,7 @@ export var 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({
@@ -139,6 +141,32 @@ export var 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();
@@ -155,13 +183,23 @@ export var 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'
@@ -173,6 +211,17 @@ export var 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/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js

@@ -9,7 +9,7 @@ export var SelectPerPageRoot = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;gap:0.5rem;"]);
 export var SelectPerPageSelect = /*#__PURE__*/styled(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(", ");"], selectTokens.buttonColor, tokens.buttonColor, selectTokens.buttonColorHover, tokens.buttonColorHover, selectTokens.buttonColorActive, tokens.buttonColorActive, selectTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, selectTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, selectTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, selectTokens.targetHeight, tokens.buttonHeight, selectTokens.buttonPadding, tokens.selectTargetPadding, selectTokens.borderRadius, tokens.buttonRadius, selectTokens.buttonArrowColor, tokens.buttonArrowColor, selectTokens.buttonArrowColorHover, tokens.buttonArrowColorHover, selectTokens.buttonArrowColorActive, tokens.buttonArrowColorActive, selectTokens.buttonArrowMargin, tokens.buttonArrowMargin, selectTokens.padding, selectTokens.itemPadding, tokens.selectItemPadding, selectTokens.itemBorderRadius, tokens.buttonRadius, selectTokens.itemIconMargin, selectTokens.itemIconSize, selectTokens.itemHeight, tokens.selectItemHeight, selectTokens.fontFamily, tokens.paginationFontFamily, selectTokens.fontSize, tokens.paginationFontSize, selectTokens.fontStyle, tokens.paginationFontStyle, selectTokens.fontWeight, tokens.paginationFontWeight, selectTokens.fontLetterSpacing, tokens.paginationLetterSpacing, selectTokens.fontLineHeight, 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(", ");"], selectTokens.targetButtonColor, tokens.buttonColor, selectTokens.targetButtonColorHover, tokens.buttonColorHover, selectTokens.targetButtonColorActive, tokens.buttonColorActive, selectTokens.targetButtonBackgroundColor, tokens.buttonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, tokens.buttonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, tokens.buttonBackgroundColorActive, selectTokens.targetHeight, tokens.buttonHeight, selectTokens.targetButtonPadding, tokens.selectTargetPadding, selectTokens.borderRadius, tokens.buttonRadius, selectTokens.targetButtonArrowColor, tokens.buttonArrowColor, selectTokens.targetButtonArrowColorHover, tokens.buttonArrowColorHover, selectTokens.targetButtonArrowColorActive, tokens.buttonArrowColorActive, selectTokens.targetButtonArrowMargin, tokens.buttonArrowMargin, selectTokens.padding, selectTokens.focusOffset, selectTokens.itemPadding, tokens.selectItemPadding, selectTokens.itemBorderRadius, tokens.buttonRadius, selectTokens.itemIconMargin, selectTokens.itemIconSize, selectTokens.itemHeight, tokens.selectItemHeight, selectTokens.fontFamily, tokens.paginationFontFamily, selectTokens.fontSize, tokens.paginationFontSize, selectTokens.fontStyle, tokens.paginationFontStyle, selectTokens.fontWeight, tokens.paginationFontWeight, selectTokens.fontLetterSpacing, tokens.paginationLetterSpacing, selectTokens.fontLineHeight, tokens.paginationLineHeight);
 export var SelectPerPageTypography = /*#__PURE__*/styled.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(", ");"], tokens.paginationFontFamily, tokens.paginationFontSize, tokens.paginationFontStyle, tokens.paginationFontWeight, tokens.paginationLetterSpacing, tokens.paginationLineHeight);

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", "isTargetAmount"];
+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 _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, useRef } from 'react';
-import { safeUseId } from '@salutejs/plasma-core';
-import { isEmpty } from '../../utils';
+import React, { forwardRef, useState, useReducer, useMemo, createContext, useLayoutEffect } from 'react';
+import { isEmpty, getPlacements } from '../../utils';
 import { useOutsideClick } from '../../hooks';
-import { useKeyNavigation, getItemByFocused } from './hooks/useKeyboardNavigation';
+import { useKeyNavigation } from './hooks/useKeyboardNavigation';
 import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, getView, getInitialValue } from './utils';
 import { Inner, Target } from './ui';
-import { pathReducer, focusedPathReducer } from './reducers';
+import { pathReducer, focusedPathReducer, focusedChipIndexReducer } from './reducers';
 import { usePathMaps } from './hooks/usePathMaps';
-import { Ul, base } from './Select.styles';
-import { FloatingPopover } from './FloatingPopover';
+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';
 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,
-      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,
@@ -57,28 +57,22 @@ 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, 5),
+      _usePathMaps2 = _slicedToArray(_usePathMaps, 4),
       pathMap = _usePathMaps2[0],
       focusedToValueMap = _usePathMaps2[1],
       valueToCheckedMap = _usePathMaps2[2],
-      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);
-
-    // Состояния дерева элементов
+      valueToItemMap = _usePathMaps2[3];
+    var value = getInitialValue(outerValue, valueToItemMap);
+    var onChange = function onChange(e) {
+      if (outerOnChange) {
+        outerOnChange(e);
+      }
+    };
     var _useReducer = useReducer(pathReducer, []),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       path = _useReducer2[0],
@@ -87,53 +81,23 @@ export var selectRoot = function selectRoot(Root) {
       _useReducer4 = _slicedToArray(_useReducer3, 2),
       focusedPath = _useReducer4[0],
       dispatchFocusedPath = _useReducer4[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 _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 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 (!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'
@@ -145,37 +109,39 @@ export var 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);
-        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);
+      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 (closeAfterSelect) {
-        dispatchPath({
-          type: 'reset'
-        });
-        dispatchFocusedPath({
-          type: 'reset'
+        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) {
@@ -184,27 +150,30 @@ export var 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 (isEmpty(item.items)) {
         handleItemClick(item, e);
@@ -220,19 +189,25 @@ export var selectRoot = function selectRoot(Root) {
       }
     };
     var _useKeyNavigation = 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 и вносим коррективы в дерево чекбоксов.
     useLayoutEffect(function () {
       var checkedCopy = new Map(checked);
       checkedCopy.forEach(function (_, key) {
@@ -251,18 +226,13 @@ export var selectRoot = function selectRoot(Root) {
         }
       }
       setChecked(checkedCopy);
-
-      // В deps мы кладем именно outerValue и internalValue, а не просто value.
-      // Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
-      // А переменную, содержащую сложные типы данных, нельзя помещать в deps.
-    }, [outerValue, internalValue, items]);
+    }, [outerValue, items]);
     return /*#__PURE__*/React.createElement(Root, _extends({
-      view: view,
+      ref: ref,
       size: size,
-      labelPlacement: labelPlacement,
-      chipView: chipView,
-      disabled: disabled
-    }, rest), /*#__PURE__*/React.createElement(Context.Provider, {
+      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, {
       value: {
         focusedPath: focusedPath,
         checked: checked,
@@ -272,63 +242,46 @@ export var selectRoot = function selectRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
-        valueToItemMap: valueToItemMap,
-        treeId: treeId
+        valueToItemMap: valueToItemMap
       }
-    }, /*#__PURE__*/React.createElement(FloatingPopover, {
-      ref: floatingPopoverRef,
+    }, /*#__PURE__*/React.createElement(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.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
+      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
     }, rest), /*#__PURE__*/React.createElement(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.createElement(Inner, {
         key: "".concat(index, "/0"),
@@ -339,7 +292,7 @@ export var selectRoot = function selectRoot(Root) {
         index: index,
         listWidth: listWidth
       });
-    }))))));
+    }))))), helperText && target === 'textfield-like' && /*#__PURE__*/React.createElement(HelperText, null, helperText));
   });
 };
 export var selectConfig = {
@@ -347,11 +300,17 @@ export var selectConfig = {
   tag: 'div',
   layout: selectRoot,
   base: base,
-  variations: {},
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    }
+  },
   defaults: {
     view: 'default',
-    size: 'm',
-    labelPlacement: 'outer',
-    chipView: 'default'
+    chipView: 'default',
+    size: 'm'
   }
 };

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

@@ -1,20 +1,35 @@
 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';
-export var Ul = /*#__PURE__*/styled.ul.withConfig({
+var Popover = /*#__PURE__*/component(popoverConfig);
+export var StyledPopover = /*#__PURE__*/styled(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;"], constants.background, constants.boxShadow, tokens.dropdownBorderWidth, tokens.dropdownBorderColor, tokens.borderRadius, function (_ref) {
+})([".", "{width:", ";}.", "{width:100%;}"], /*#__PURE__*/String(popoverClasses.root), function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
-}, function (_ref2) {
-  var listHeight = _ref2.listHeight;
-  return listHeight ? getCorrectHeight(listHeight) : 'auto';
+}, /*#__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 listOverflow = _ref3.listOverflow;
-  return listOverflow || 'initial';
+  var listHeight = _ref3.listHeight;
+  return listHeight ? getCorrectHeight(listHeight) : 'auto';
 }, 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([""]);
+  var listOverflow = _ref4.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);