@salutejs/plasma-new-hope 0.192.1-dev.0 → 0.193.0-canary.1550.11805988388.0

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 };