@salutejs/plasma-new-hope 0.191.2-canary.1557.11803291365.0 → 0.192.0-canary.1550.11799501370.0

package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
     contentRight: string;
     stretch: boolean;
     helperText: string;
-    maxItemWidth: string;
 };
 
 const contentLeftOptions = ['none', 'icon'];
@@ -60,6 +59,17 @@ const meta: Meta<StoryTabsProps> = {
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {
+        ...disableProps([
+            'orientation',
+            'tabItemContentLeft',
+            'pilled',
+            'animated',
+            'view',
+            'as',
+            'forwardedAs',
+            'outsideScroll',
+            'index',
+        ]),
         contentRight: {
             options: contentRightOptions,
             control: {
@@ -73,17 +83,6 @@ const meta: Meta<StoryTabsProps> = {
             },
             if: { arg: 'stretch', truthy: false },
         },
-        ...disableProps([
-            'orientation',
-            'tabItemContentLeft',
-            'pilled',
-            'animated',
-            'view',
-            'as',
-            'forwardedAs',
-            'outsideScroll',
-            'index',
-        ]),
     },
 };
 
@@ -100,13 +99,12 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
         stretch,
         maxItemWidth,
         helperText,
-        clip,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs clip="none" view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (

package/styled-components/cjs/index.js

@@ -47,6 +47,17 @@ Object.keys(_utils).forEach(function (key) {
     }
   });
 });
+var _types = /*#__PURE__*/require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
 var _Button = /*#__PURE__*/require("./components/Button");
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/styled-components/cjs/types/DistributiveOmit.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styled-components/cjs/types/DistributivePick.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styled-components/cjs/utils/fixedForwardRef.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixedForwardRef = fixedForwardRef;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function fixedForwardRef(render) {
+  return /*#__PURE__*/_react["default"].forwardRef(render);
+}

package/styled-components/cjs/utils/index.js

@@ -17,7 +17,8 @@ var _exportNames = {
   setRefList: true,
   isEmpty: true,
   constants: true,
-  noop: true
+  noop: true,
+  fixedForwardRef: true
 };
 Object.defineProperty(exports, "IS_REACT_18", {
   enumerable: true,
@@ -38,6 +39,12 @@ Object.defineProperty(exports, "extractTextFrom", {
     return _extractTextFrom.extractTextFrom;
   }
 });
+Object.defineProperty(exports, "fixedForwardRef", {
+  enumerable: true,
+  get: function get() {
+    return _fixedForwardRef.fixedForwardRef;
+  }
+});
 Object.defineProperty(exports, "getSizeValueFromProp", {
   enumerable: true,
   get: function get() {
@@ -102,6 +109,7 @@ Object.keys(_getPopoverPlacement).forEach(function (key) {
   });
 });
 var _noop = /*#__PURE__*/require("./noop");
+var _fixedForwardRef = /*#__PURE__*/require("./fixedForwardRef");
 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 cx = exports.cx = function cx() {

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

@@ -9,13 +9,16 @@ var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
 var Link = /*#__PURE__*/component(mergedLinkConfig);
 export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
   componentId: "plasma-new-hope__sc-4bjoev-0"
-})(["--plasma__private-color:", ";--plasma-link-color:var(--plasma__private-color);--plasma-link-color-hover:var(--plasma__private-color);--plasma-link-color-active:var(--plasma__private-color);--plasma-link-disabled-opacity:var(", ");opacity:", ";cursor:pointer;", ""], function (_ref) {
+})(["opacity:", ";cursor:", ";color:", ";--plasma-link-disabled-opacity:var(", ");", ""], function (_ref) {
   var isHref = _ref.isHref;
-  return isHref ? "var(".concat(tokens.breadcrumbsColor, ")") : "var(".concat(tokens.breadcrumbsColorText, ")");
-}, tokens.breadcrumbsOpacity, function (_ref2) {
-  var isHref = _ref2.isHref;
   return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
-}, /*#__PURE__*/addFocus({
+}, function (_ref2) {
+  var isHref = _ref2.isHref;
+  return isHref ? 'pointer' : 'auto';
+}, function (_ref3) {
+  var isHref = _ref3.isHref;
+  return isHref ? "var(".concat(tokens.breadcrumbsColor, ")") : "var(".concat(tokens.breadcrumbsColorText, ")");
+}, tokens.breadcrumbsOpacity, /*#__PURE__*/addFocus({
   outlineOffset: '0rem',
   outlineSize: '0.125rem',
   outlineRadius: '0rem',

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

@@ -36,7 +36,9 @@ export var cellRoot = function cellRoot(Root) {
       className: cx(stretchingClass, classes.cellRoot, className)
     }, contentLeftDeprecated && /*#__PURE__*/React.createElement(CellLeft, {
       align: alignContentLeft
-    }, contentLeftDeprecated), /*#__PURE__*/React.createElement(CellContentWrapper, null, /*#__PURE__*/React.createElement(CellContent, null, titleText || subtitle || label ? /*#__PURE__*/React.createElement(CellTextbox, {
+    }, contentLeftDeprecated), /*#__PURE__*/React.createElement(CellContentWrapper, null, /*#__PURE__*/React.createElement(CellContent, {
+      className: "cell-content"
+    }, titleText || subtitle || label ? /*#__PURE__*/React.createElement(CellTextbox, {
       label: label,
       title: titleText,
       subtitle: subtitle

package/styled-components/es/components/Cell/ui/CellTextbox/CellTextbox.js

@@ -8,5 +8,11 @@ export var CellTextbox = function CellTextbox(_ref) {
     title = _ref.title,
     subtitle = _ref.subtitle,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(CellTextboxStyled, null, label || title || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(CellTextboxLabel, null, label), title && /*#__PURE__*/React.createElement(CellTextboxTitle, null, title), subtitle && /*#__PURE__*/React.createElement(CellTextboxSubtitle, null, subtitle)) : children);
+  return (
+    /*#__PURE__*/
+    // TODO: #1548
+    React.createElement(CellTextboxStyled, {
+      className: "cell-textbox"
+    }, label || title || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(CellTextboxLabel, null, label), title && /*#__PURE__*/React.createElement(CellTextboxTitle, null, title), subtitle && /*#__PURE__*/React.createElement(CellTextboxSubtitle, null, subtitle)) : children)
+  );
 };

package/styled-components/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import { StyledTextboxTitle } from './CellTextboxTitle.styles';
 export var CellTextboxTitle = function CellTextboxTitle(props) {
-  return /*#__PURE__*/React.createElement(StyledTextboxTitle, null, props.children);
+  // TODO: #1548
+  return /*#__PURE__*/React.createElement(StyledTextboxTitle, {
+    className: "cell-textbox-title"
+  }, props.children);
 };

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

@@ -37,7 +37,9 @@ export var chipRoot = function chipRoot(Root) {
     var txt = !text && typeof children === 'string' ? children : text;
     var pilledClass = pilled ? classes.pilled : undefined;
     var handleClick = function handleClick(event) {
-      if (disabled || readOnly) {
+      // TODO: #1547
+      // eslint-disable-next-line no-underscore-dangle
+      if (disabled || readOnly && !rest._forceChipManipulationWithReadonly) {
         return;
       }
       onClick === null || onClick === void 0 || onClick(event);

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

@@ -301,7 +301,6 @@ export var comboboxRoot = function comboboxRoot(Root) {
         focusedToValueMap: focusedToValueMap,
         handleListToggle: handleListToggle,
         handlePressDown: handlePressDown,
-        multiselect: multiple,
         setTextValue: setTextValue
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js

@@ -51,7 +51,6 @@ export var tokens = {
   checkboxIconColor: '--plasma-combobox-checkbox-icon-color',
   checkboxTriggerBorderColor: '--plasma-combobox-checkbox-trigger-border-color',
   indicatorSize: '--plasma-combobox-indicator-size',
-  targetHeight: '--plasma-combobox-target-height',
   // Токены для TextField
   textFieldColor: '--plasma-combobox-new-textfield-color',
   textFieldClearColor: '--plasma-combobox-new-textfield-clear-color',

package/styled-components/es/components/Combobox/ComboboxNew/FloatingPopover.js

@@ -56,14 +56,28 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
   /*#__PURE__*/
   // root - принимает ref контейнера портала.
   // id - если есть портал - не используется, если портала нет - подставляется 'wrappedId'.
-  React.createElement(FloatingPortal, {
-    root: portal,
-    id: portal ? undefined : wrappedId
-  }, /*#__PURE__*/React.createElement("div", {
+  React.createElement(FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/React.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
+  };
+};
 export { FloatingPopover };

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

@@ -29,7 +29,6 @@ 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;
@@ -124,7 +123,6 @@ 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({
@@ -141,32 +139,6 @@ 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();
@@ -183,34 +155,12 @@ 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:
-        {
-          dispatchPath({
-            type: 'reset'
-          });
-          dispatchFocusedPath({
-            type: 'reset'
-          });
-          handleListToggle(false);
-          setTextValue('');
-          break;
-        }
       case keys.Escape:
         {
           dispatchPath({
@@ -220,6 +170,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
             type: 'reset'
           });
           handleListToggle(false);
+          setTextValue('');
           break;
         }
       case keys.Home:

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;", ":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);
+})(["", ":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);
 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/FloatingPopover.js

@@ -0,0 +1,84 @@
+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); }
+import { flip, shift, size, useFloating, FloatingPortal, offset as offsetMiddleware } from '@floating-ui/react';
+import React, { forwardRef } from 'react';
+import { safeUseId } from '@salutejs/plasma-core';
+import { getPlacement, getFallbackPlacements } from './utils';
+var FloatingPopover = /*#__PURE__*/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 = useFloating({
+      placement: getPlacement(placement),
+      open: opened,
+      middleware: [offsetMiddleware(offset), flip({
+        fallbackPlacements: getFallbackPlacements(placement)
+      }), shift(), 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 = safeUseId();
+  var handleClick = function handleClick() {
+    if (onToggle) {
+      onToggle(!opened);
+    }
+  };
+
+  // Проверка на target. Это может быть как ReactNode, так и функция, в которую пробрасывается ref.
+  // Это нужно для более тонкой настройки reference-элемента, вокруг которого и будет позиционироваться выпадашка.
+  // Пример: когда в Textfield под инпутом находится helperText (или еще что-либо),
+  // но выпадающий список должен позиционироваться непосредственно возле самого инпута.
+  var isTargetAsFunction = typeof target === 'function';
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    id: wrappedId
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: isTargetAsFunction ? undefined : refs.setReference,
+    onClick: handleClick
+  }, typeof target === 'function' ? target(refs.setReference) : target), opened &&
+  /*#__PURE__*/
+  // root - принимает ref контейнера портала.
+  // id - если есть портал - не используется, если портала нет - подставляется 'wrappedId'.
+  React.createElement(FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/React.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
+  };
+};
+export { FloatingPopover };