@salutejs/plasma-new-hope 0.190.0-canary.1550.11795356464.0 → 0.190.0-canary.1552.11794692529.0

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

@@ -1,5 +1,6 @@
-var _excluded = ["multiple", "value", "onChange", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue"];
+var _excluded = ["name", "multiple", "value", "onChange", "defaultValue", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue"];
 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 _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 _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."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -8,7 +9,7 @@ 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 React, { forwardRef, useState, useReducer, useMemo, createContext, useLayoutEffect, useRef, useEffect } from 'react';
 import { safeUseId, useForkRef } from '@salutejs/plasma-core';
 import { isEmpty } from '../../../utils';
 import { useOutsideClick } from '../../../hooks';
@@ -23,17 +24,21 @@ import { getPathMap, getTreeMaps } from './hooks/getPathMaps';
 import { Ul, base, StyledArrow, IconArrowWrapper, StyledEmptyState } from './Combobox.styles';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
+import { Form } from './ui/Form/Form';
 export var Context = /*#__PURE__*/createContext({});
 
 /**
  * Поле ввода с выпадающим списком и возможностью фильтрации и выбора элементов.
  */
+
 export var comboboxRoot = function comboboxRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var _valueToItemMap$get, _valueToItemMap$get2, _getItemByFocused;
-    var multiple = props.multiple,
+    var name = props.name,
+      multiple = props.multiple,
       outerValue = props.value,
       outerOnChange = props.onChange,
+      defaultValue = props.defaultValue,
       isTargetAmount = props.isTargetAmount,
       targetAmount = props.targetAmount,
       items = props.items,
@@ -142,9 +147,19 @@ export var comboboxRoot = function comboboxRoot(Root) {
     }, floatingPopoverRef);
     var onChange = function onChange(newValue) {
       if (outerOnChange) {
-        outerOnChange(newValue);
+        if (!name && !multiple && typeof newValue === 'string') {
+          outerOnChange(newValue);
+        }
+        if (!name && multiple && Array.isArray(newValue)) {
+          outerOnChange(newValue);
+        }
+        if (name && _typeof(newValue) === 'object' && !Array.isArray(newValue)) {
+          outerOnChange(newValue);
+        }
+      }
+      if (typeof newValue === 'string' || Array.isArray(newValue)) {
+        setInternalValue(newValue);
       }
-      setInternalValue(newValue);
     };
     var handleClickArrow = function handleClickArrow() {
       if (disabled || readOnly) {
@@ -301,6 +316,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
         focusedToValueMap: focusedToValueMap,
         handleListToggle: handleListToggle,
         handlePressDown: handlePressDown,
+        multiselect: multiple,
         setTextValue: setTextValue
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
@@ -332,13 +348,24 @@ export var comboboxRoot = function comboboxRoot(Root) {
       // Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
       // А переменную, содержащую сложные типы данных, нельзя помещать в deps.
     }, [outerValue, internalValue, items]);
+    useEffect(function () {
+      if (defaultValue) {
+        setInternalValue(defaultValue);
+      }
+    }, [defaultValue]);
     return /*#__PURE__*/React.createElement(Root, {
       size: size,
       view: view,
       labelPlacement: labelPlacement,
       disabled: disabled,
       readOnly: readOnly
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Context.Provider, {
+    }, name && /*#__PURE__*/React.createElement(Form, {
+      name: name,
+      value: internalValue,
+      multiple: multiple,
+      onChange: onChange,
+      ref: ref
+    }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Context.Provider, {
       value: {
         focusedPath: focusedPath,
         checked: checked,
@@ -362,7 +389,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       listWidth: listWidth,
       target: function target(referenceRef) {
         return /*#__PURE__*/React.createElement(StyledTextField, _extends({
-          ref: inputForkRef,
+          ref: name ? inputRef : inputForkRef,
           inputWrapperRef: referenceRef,
           value: textValue,
           onChange: handleTextValueChange,

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

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

@@ -0,0 +1,29 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { useForkRef } from '@salutejs/plasma-core';
+import { createEvent } from '../../../../../utils/syntheticEvent';
+import { SelectHidden } from './Form.styles';
+export var Form = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+    multiple = _ref.multiple,
+    value = _ref.value,
+    onChange = _ref.onChange;
+  var values = multiple ? value : [value];
+  var selectRef = useRef(null);
+  var forkRef = useForkRef(selectRef, ref);
+  useEffect(function () {
+    var event = createEvent(selectRef);
+    onChange && onChange(event);
+  }, [values]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectHidden, {
+    ref: forkRef,
+    multiple: multiple,
+    name: name,
+    hidden: true,
+    value: multiple ? values : values[0]
+  }, values.map(function (v) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: v,
+      value: v
+    }, v);
+  })));
+});

package/styled-components/es/components/Combobox/ComboboxNew/ui/Form/Form.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+import { applyHidden } from '../../../../../mixins';
+export var SelectHidden = /*#__PURE__*/styled.select.withConfig({
+  componentId: "plasma-new-hope__sc-13p7uhq-0"
+})(["", ";"], /*#__PURE__*/applyHidden());

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