@salutejs/plasma-new-hope 0.193.1-canary.1561.11839785759.0 → 0.194.0-canary.1552.11858023676.0

package/emotion/cjs/examples/plasma_web/components/Select/Select.stories.tsx

@@ -79,24 +79,6 @@ const meta: Meta<StorySelectProps> = {
                 eq: 'textfield-like',
             },
         },
-        requiredPlacement: {
-            options: ['left', 'right'],
-            control: {
-                type: 'select',
-            },
-        },
-        required: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'optional', truthy: false },
-        },
-        optional: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'required', truthy: false },
-        },
     },
     args: {
         target: 'textfield-like',
@@ -111,9 +93,6 @@ const meta: Meta<StorySelectProps> = {
         isTargetAmount: false,
         variant: 'normal',
         disabled: false,
-        optional: false,
-        required: false,
-        requiredPlacement: 'right',
     },
     parameters: {
         controls: {
@@ -134,9 +113,6 @@ const meta: Meta<StorySelectProps> = {
                 'listWidth',
                 'listOverflow',
                 'listHeight',
-                'optional',
-                'required',
-                'requiredPlacement',
             ],
         },
     },

package/emotion/cjs/utils/createEvent.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEvent = void 0;
+var createEvent = exports.createEvent = function createEvent(ref) {
+  if (ref.current) {
+    var event = new Event('change', {
+      bubbles: true
+    });
+    Object.defineProperty(event, 'target', {
+      writable: false,
+      value: ref.current
+    });
+    var syntheticEvent = createSyntheticEvent(event);
+    return syntheticEvent;
+  }
+  return null;
+};
+var createSyntheticEvent = function createSyntheticEvent(event) {
+  var _isDefaultPrevented = false;
+  var _isPropagationStopped = false;
+  var preventDefault = function preventDefault() {
+    _isDefaultPrevented = true;
+    event.preventDefault();
+  };
+  var stopPropagation = function stopPropagation() {
+    _isPropagationStopped = true;
+    event.stopPropagation();
+  };
+  return {
+    nativeEvent: event,
+    currentTarget: event.currentTarget,
+    target: event.target,
+    bubbles: event.bubbles,
+    cancelable: event.cancelable,
+    defaultPrevented: event.defaultPrevented,
+    eventPhase: event.eventPhase,
+    isTrusted: event.isTrusted,
+    preventDefault: preventDefault,
+    isDefaultPrevented: function isDefaultPrevented() {
+      return _isDefaultPrevented;
+    },
+    stopPropagation: stopPropagation,
+    isPropagationStopped: function isPropagationStopped() {
+      return _isPropagationStopped;
+    },
+    persist: function persist() {},
+    timeStamp: event.timeStamp,
+    type: event.type
+  };
+};

package/emotion/cjs/utils/index.js

@@ -16,6 +16,7 @@ var _exportNames = {
   mergeRefs: true,
   setRefList: true,
   isEmpty: true,
+  createEvent: true,
   constants: true,
   noop: true,
   fixedForwardRef: true
@@ -32,7 +33,14 @@ Object.defineProperty(exports, "canUseDOM", {
     return _canUseDOM.canUseDOM;
   }
 });
-exports.cx = exports.constants = exports.composableStyle = void 0;
+exports.constants = exports.composableStyle = void 0;
+Object.defineProperty(exports, "createEvent", {
+  enumerable: true,
+  get: function get() {
+    return _createEvent.createEvent;
+  }
+});
+exports.cx = void 0;
 Object.defineProperty(exports, "extractTextFrom", {
   enumerable: true,
   get: function get() {
@@ -94,6 +102,7 @@ var _react = /*#__PURE__*/require("./react");
 var _isNumber = /*#__PURE__*/require("./isNumber");
 var _setRefList = /*#__PURE__*/require("./setRefList");
 var _isEmpty = /*#__PURE__*/require("./isEmpty");
+var _createEvent = /*#__PURE__*/require("./createEvent");
 var _constants = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("./constants"));
 exports.constants = _constants;
 var _getPopoverPlacement = /*#__PURE__*/require("./getPopoverPlacement");

package/emotion/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 { SelectNative } from './ui/SelectNative/SelectNative';
 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,
@@ -65,6 +70,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       outerCloseAfterSelect = props.closeAfterSelect,
       renderValue = props.renderValue,
       rest = _objectWithoutProperties(props, _excluded);
+    console.log('render');
     var transformedItems = useMemo(function () {
       return initialItemsTransform(items || []);
     }, [items]);
@@ -140,11 +146,27 @@ export var comboboxRoot = function comboboxRoot(Root) {
         }
       }
     }, floatingPopoverRef);
+
+    // Эта функция срабатывает при изменении Combobox и
+    // при изменении нативного Select для формы (срабатывает только после изменения internalValue и рендера).
     var onChange = function onChange(newValue) {
+      // Условие для отправки изменений наружу
       if (outerOnChange) {
-        outerOnChange(newValue);
+        // Условие для отправки если комбобокс используется без формы.
+        if (!name && (typeof newValue === 'string' || Array.isArray(newValue))) {
+          outerOnChange(newValue);
+        }
+
+        // Условие для отправки если комбобокс используется с формой.
+        if (name && _typeof(newValue) === 'object' && !Array.isArray(newValue)) {
+          outerOnChange(newValue);
+        }
+      }
+
+      // Условие для изменения внутреннего значения (только если newValue строка или массив строк).
+      if (typeof newValue === 'string' || Array.isArray(newValue)) {
+        setInternalValue(newValue);
       }
-      setInternalValue(newValue);
     };
     var handleClickArrow = function handleClickArrow() {
       if (disabled || readOnly) {
@@ -332,13 +354,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(SelectNative, {
+      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 +395,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/emotion/es/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.js

@@ -0,0 +1,31 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { useForkRef } from '@salutejs/plasma-core';
+import { createEvent } from '../../../../../utils';
+import { SelectHidden } from './SelectNative.styles';
+export var SelectNative = /*#__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);
+    if (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/emotion/es/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.styles.js

@@ -0,0 +1,6 @@
+import _styled from "@emotion/styled/base";
+import { applyHidden } from '../../../../../mixins';
+export var SelectHidden = /*#__PURE__*/_styled("select", {
+  target: "eywcm6j0",
+  label: "plasma-new-hope__SelectHidden"
+})( /*#__PURE__*/applyHidden(), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29tYm9ib3gvQ29tYm9ib3hOZXcvdWkvU2VsZWN0TmF0aXZlL1NlbGVjdE5hdGl2ZS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXlDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29tYm9ib3gvQ29tYm9ib3hOZXcvdWkvU2VsZWN0TmF0aXZlL1NlbGVjdE5hdGl2ZS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGFwcGx5SGlkZGVuIH0gZnJvbSAnLi4vLi4vLi4vLi4vLi4vbWl4aW5zJztcblxuZXhwb3J0IGNvbnN0IFNlbGVjdEhpZGRlbiA9IHN0eWxlZC5zZWxlY3RgXG4gICAgJHthcHBseUhpZGRlbigpfTtcbmA7XG4iXX0= */"));

package/emotion/es/components/Select/Select.js

@@ -30,7 +30,7 @@ export var selectRoot = function selectRoot(Root) {
     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,
@@ -95,14 +95,7 @@ export var selectRoot = function selectRoot(Root) {
     var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
     var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
     var treeId = safeUseId();
-    var view = target === 'textfield-like' && disabled ? 'default' : getView(status, outerView);
-
-    // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
-    var requiredProps = props.target === 'button-like' ? undefined : {
-      required: props.required,
-      requiredPlacement: props.requiredPlacement,
-      optional: props.optional
-    };
+    var view = _target === 'textfield-like' && disabled ? 'default' : getView(status, outerView);
     var targetRef = useOutsideClick(function () {
       if (!isCurrentListOpen) {
         return;
@@ -294,6 +287,7 @@ export var selectRoot = function selectRoot(Root) {
       target: function target(referenceRef) {
         return /*#__PURE__*/React.createElement(Target, {
           ref: ref,
+          target: _target,
           value: value,
           opened: isCurrentListOpen,
           valueToItemMap: valueToItemMap,
@@ -317,8 +311,7 @@ export var selectRoot = function selectRoot(Root) {
           onChange: onChange,
           labelToItemMap: labelToItemMap,
           chipView: chipView,
-          separator: separator,
-          requiredProps: requiredProps
+          separator: separator
         });
       }
     }, /*#__PURE__*/React.createElement(Root, _extends({

package/emotion/es/components/Select/Select.tokens.js

@@ -71,6 +71,7 @@ export var tokens = {
   textFieldBorderColorFocus: '--plasma-select-textfield-border-color-focus',
   textFieldPlaceholderColor: '--plasma-select-textfield-placeholder-color',
   textFieldPlaceholderColorFocus: '--plasma-select-textfield-placeholder-color-focus',
+  textFieldOptionalColor: '--plasma-select-textfield-optional-color',
   textFieldHeight: '--plasma-select-textfield-height',
   textFieldBorderWidth: '--plasma-select-textfield-border-width',
   textFieldBorderRadius: '--plasma-select-textfield-border-radius',
@@ -154,17 +155,6 @@ export var tokens = {
   textFieldChipLineHeight: '--plasma-select-textfield-chip-line-height',
   textFieldChipClearContentMarginLeft: '--plasma-select-textfield-chip-clear-content-margin-left',
   textFieldChipClearContentMarginRight: '--plasma-select-textfield-chip-clear-content-margin-right',
-  textFieldIndicatorColor: '--plasma-select-new-textfield-indicator-color',
-  textFieldIndicatorSizeInner: '--plasma-select-new-textfield-indicator-size-inner',
-  textFieldIndicatorSizeOuter: '--plasma-select-new-textfield-indicator-size-outer',
-  textFieldIndicatorLabelPlacementInner: '--plasma-select-new-textfield-indicator-placement-inner',
-  textFieldIndicatorLabelPlacementOuter: '--plasma-select-new-textfield-indicator-placement-outer',
-  textFieldIndicatorLabelPlacementInnerRight: '--plasma-select-new-textfield-indicator-placement-inner-right',
-  textFieldIndicatorLabelPlacementOuterRight: '--plasma-select-new-textfield-indicator-placement-outer-right',
-  textFieldClearIndicatorLabelPlacementInner: '--plasma-select-new-textfield-clear-indicator-placement-inner',
-  textFieldClearIndicatorLabelPlacementInnerRight: '--plasma-select-new-textfield-clear-indicator-placement-inner-right',
-  textFieldClearIndicatorHintInnerRight: '--plasma-select-new-textfield-clear-indicator-hint-placement-inner-right',
-  textFieldOptionalColor: '--plasma-select-new-textfield-optional-color',
   textFieldFocusColor: '--plasma-select-textfield-focus-color',
   disclosureIconColor: '--plasma-select-disclosure-icon-color',
   disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'

package/emotion/es/components/Select/ui/Target/Target.js

@@ -3,6 +3,7 @@ import { useForkRef } from '@salutejs/plasma-core';
 import { Button, Textfield } from './ui';
 export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
+    target = _ref.target,
     opened = _ref.opened,
     valueToItemMap = _ref.valueToItemMap,
     label = _ref.label,
@@ -25,8 +26,7 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     labelToItemMap = _ref.labelToItemMap,
     chipView = _ref.chipView,
-    separator = _ref.separator,
-    requiredProps = _ref.requiredProps;
+    separator = _ref.separator;
   var buttonRef = useForkRef(ref, inputWrapperRef);
   if (selectProps.renderTarget) {
     return /*#__PURE__*/React.createElement("div", {
@@ -35,7 +35,7 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return valueToItemMap.get(value);
     }) : valueToItemMap.get(value)));
   }
-  return selectProps.target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
+  return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
     ref: buttonRef,
     opened: opened,
     value: value,
@@ -72,7 +72,6 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
     renderValue: renderValue,
     onChange: onChange,
     labelToItemMap: labelToItemMap,
-    chipView: chipView,
-    requiredProps: requiredProps
+    chipView: chipView
   });
 });

package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -26,8 +26,7 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
     renderValue = _ref.renderValue,
     onChange = _ref.onChange,
     labelToItemMap = _ref.labelToItemMap,
-    chipView = _ref.chipView,
-    requiredProps = _ref.requiredProps;
+    chipView = _ref.chipView;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
   var getChips = function getChips() {
     if (multiselect && Array.isArray(value)) {
@@ -93,5 +92,5 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // TODO: #1547
     ,
     _forceChipManipulationWithReadonly: true
-  }, requiredProps));
+  }));
 });