@salutejs/plasma-new-hope 0.187.0-dev.0 → 0.188.0-canary.1550.11767527974.0

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

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPopover = void 0;
+var _react = /*#__PURE__*/require("@floating-ui/react");
+var _react2 = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
+var _utils = /*#__PURE__*/require("./utils");
+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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
+  var target = _ref.target,
+    children = _ref.children,
+    opened = _ref.opened,
+    onToggle = _ref.onToggle,
+    placement = _ref.placement,
+    portal = _ref.portal,
+    listWidth = _ref.listWidth,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset;
+  var _useFloating = (0, _react.useFloating)({
+      placement: (0, _utils.getPlacement)(placement),
+      open: opened,
+      middleware: [(0, _react.offset)(offset), (0, _react.flip)({
+        fallbackPlacements: (0, _utils.getFallbackPlacements)(placement)
+      }), (0, _react.shift)(), (0, _react.size)({
+        apply: function apply(_ref2) {
+          var rects = _ref2.rects,
+            elements = _ref2.elements;
+          Object.assign(elements.floating.style, {
+            width: listWidth || "".concat(rects.reference.width, "px")
+          });
+        }
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
+  var wrappedId = (0, _plasmaCore.safeUseId)();
+  var handleClick = function handleClick() {
+    if (onToggle) {
+      onToggle(!opened);
+    }
+  };
+
+  // Проверка на target. Это может быть как ReactNode, так и функция, в которую пробрасывается ref.
+  // Это нужно для более тонкой настройки reference-элемента, вокруг которого и будет позиционироваться выпадашка.
+  // Пример: когда в Textfield под инпутом находится helperText (или еще что-либо),
+  // но выпадающий список должен позиционироваться непосредственно возле самого инпута.
+  var isTargetAsFunction = typeof target === 'function';
+  return /*#__PURE__*/_react2["default"].createElement("div", {
+    ref: ref,
+    id: wrappedId
+  }, /*#__PURE__*/_react2["default"].createElement("div", {
+    ref: isTargetAsFunction ? undefined : refs.setReference,
+    onClick: handleClick
+  }, typeof target === 'function' ? target(refs.setReference) : target), opened &&
+  /*#__PURE__*/
+  // root - принимает ref контейнера портала.
+  // id - если есть портал - не используется, если портала нет - подставляется 'wrappedId'.
+  _react2["default"].createElement(_react.FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/_react2["default"].createElement("div", {
+    ref: refs.setFloating,
+    style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+      zIndex: 1
+    })
+  }, children)));
+});
+// root - принимает ref контейнера портала.
+// id - если есть портал - не используется, если портала нет - подставляется 'wrappedId'.
+var getFloatingPortalProps = function getFloatingPortalProps(portal, wrappedId) {
+  if (!portal) {
+    return {
+      id: wrappedId
+    };
+  }
+  if (typeof portal === 'string') {
+    return {
+      id: portal
+    };
+  }
+  return {
+    root: portal
+  };
+};

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

@@ -6,6 +6,7 @@ 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");
@@ -14,9 +15,8 @@ var _ui = /*#__PURE__*/require("./ui");
 var _reducers = /*#__PURE__*/require("./reducers");
 var _usePathMaps3 = /*#__PURE__*/require("./hooks/usePathMaps");
 var _Select = /*#__PURE__*/require("./Select.styles");
-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"];
+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"];
 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,
-      _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,
@@ -66,22 +66,28 @@ 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, 4),
+      _usePathMaps2 = _slicedToArray(_usePathMaps, 5),
       pathMap = _usePathMaps2[0],
       focusedToValueMap = _usePathMaps2[1],
       valueToCheckedMap = _usePathMaps2[2],
-      valueToItemMap = _usePathMaps2[3];
-    var value = (0, _utils2.getInitialValue)(outerValue, valueToItemMap);
-    var onChange = function onChange(e) {
-      if (outerOnChange) {
-        outerOnChange(e);
-      }
-    };
+      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);
+
+    // Состояния дерева элементов
     var _useReducer = (0, _react.useReducer)(_reducers.pathReducer, []),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       path = _useReducer2[0],
@@ -90,23 +96,53 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       _useReducer4 = _slicedToArray(_useReducer3, 2),
       focusedPath = _useReducer4[0],
       dispatchFocusedPath = _useReducer4[1];
-    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 _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 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 (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'
@@ -118,39 +154,37 @@ var selectRoot = exports.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);
-          (0, _utils2.updateDescendants)(item, checkedCopy, true);
-        } else {
-          checkedCopy.set(item.value, false);
-          (0, _utils2.updateDescendants)(item, checkedCopy, false);
+      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);
         }
-        (0, _utils2.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) {
@@ -159,29 +193,26 @@ var selectRoot = exports.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 ((0, _utils.isEmpty)(item.items)) {
@@ -198,25 +229,19 @@ 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,
-        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 извне, тогда нужно пройтись по элементам и выключить все чекбоксы.
     (0, _react.useLayoutEffect)(function () {
       var checkedCopy = new Map(checked);
       checkedCopy.forEach(function (_, key) {
@@ -235,13 +260,18 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         }
       }
       setChecked(checkedCopy);
-    }, [outerValue, items]);
+
+      // В deps мы кладем именно outerValue и internalValue, а не просто value.
+      // Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
+      // А переменную, содержащую сложные типы данных, нельзя помещать в deps.
+    }, [outerValue, internalValue, items]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
-      ref: ref,
+      view: view,
       size: size,
-      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, {
+      labelPlacement: labelPlacement,
+      chipView: chipView,
+      disabled: disabled
+    }, rest), /*#__PURE__*/_react["default"].createElement(Context.Provider, {
       value: {
         focusedPath: focusedPath,
         checked: checked,
@@ -251,46 +281,63 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
-        valueToItemMap: valueToItemMap
+        valueToItemMap: valueToItemMap,
+        treeId: treeId
       }
-    }, /*#__PURE__*/_react["default"].createElement(_Select.StyledPopover, {
-      ref: targetRef,
+    }, /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
+      ref: floatingPopoverRef,
       opened: isCurrentListOpen,
-      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
+      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
     }, rest), /*#__PURE__*/_react["default"].createElement(_Select.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["default"].createElement(_ui.Inner, {
         key: "".concat(index, "/0"),
@@ -301,7 +348,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 = {
@@ -309,17 +356,11 @@ var selectConfig = exports.selectConfig = {
   tag: 'div',
   layout: selectRoot,
   base: _Select.base,
-  variations: {
-    view: {
-      css: _base.base
-    },
-    size: {
-      css: _base2.base
-    }
-  },
+  variations: {},
   defaults: {
     view: 'default',
-    chipView: 'default',
-    size: 'm'
+    size: 'm',
+    labelPlacement: 'outer',
+    chipView: 'default'
   }
 };

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

@@ -4,40 +4,25 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.Ul = exports.StyledPopover = exports.OuterLabel = exports.HelperText = void 0;
+exports.base = exports.Ul = 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 Popover = /*#__PURE__*/(0, _engines.component)(_Popover.popoverConfig);
-var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["default"])(Popover).withConfig({
+var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-0"
-})([".", "{width:", ";}.", "{width:100%;}"], /*#__PURE__*/String(_Popover.popoverClasses.root), function (_ref) {
+})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";border:var(", ") solid var(", ");margin:", ";padding:var(", ") 0;"], _Select.constants.background, _Select.constants.boxShadow, _Select.tokens.borderRadius, function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
-}, /*#__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 listHeight = _ref3.listHeight;
+}, function (_ref2) {
+  var listHeight = _ref2.listHeight;
   return listHeight ? (0, _utils.getCorrectHeight)(listHeight) : 'auto';
-}, function (_ref4) {
-  var listOverflow = _ref4.listOverflow;
+}, function (_ref3) {
+  var listOverflow = _ref3.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.dropdownBorderWidth, _Select.tokens.dropdownBorderColor, function (_ref4) {
+  var isInnerUl = _ref4.isInnerUl;
+  return isInnerUl ? "calc(var(".concat(_Select.tokens.padding, ") * -1) 0 0 0") : 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);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);