@salutejs/plasma-new-hope 0.159.0-canary.1443.11131308290.0 → 0.159.0-canary.1443.11139400186.0

package/emotion/es/components/Steps/Steps.js

@@ -15,16 +15,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef, useState, useEffect } from 'react';
 import cls from 'classnames';
 import { classes } from './Steps.tokens';
-import { base } from './Steps.styles';
 import { StepItem } from './ui';
+import { base } from './Steps.styles';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
+import { getItemStatus } from './utils/getItemStatus';
 export var stepsRoot = function stepsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var _props$view = props.view,
       view = _props$view === void 0 ? 'default' : _props$view,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 's' : _props$size,
+      size = props.size,
       _props$orientation = props.orientation,
       orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
       _props$contentAlign = props.contentAlign,
@@ -69,39 +69,32 @@ export var stepsRoot = function stepsRoot(Root) {
       ref: outerRef,
       className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
     }, rest), items.map(function (item, index) {
-      var itemStatus = 'inactive';
-      if (isUncontrolled) {
-        if (current > index) {
-          itemStatus = 'completed';
-        } else if (current === index) {
-          itemStatus = status || 'active';
-        }
-      } else {
-        itemStatus = status || item.status || 'inactive';
-      }
-      if (item.disabled) {
-        itemStatus = 'inactive';
-      }
+      var itemStatus = getItemStatus({
+        isUncontrolled: isUncontrolled,
+        current: current,
+        status: status,
+        index: index,
+        item: item
+      });
       var isActive = itemStatus === 'active';
-      var content = item.content;
-      if (hasContent === 'active' && !isActive || hasContent === 'none') {
-        content = '';
-      }
+      var itemContent = hasContent === 'active' && !isActive || hasContent === 'none' ? '' : item.content;
+      var itemContentAlign = orientation === 'horizontal' ? contentAlign : 'left';
+      var onClick = onChange ? function () {
+        return onChange(item, index, prevIndex);
+      } : undefined;
       return /*#__PURE__*/React.createElement(StepItem, {
         key: index,
         index: index,
         title: item.title,
-        content: content,
+        content: itemContent,
         indicator: item.indicator,
         status: itemStatus,
         size: size,
         orientation: orientation,
-        contentAlign: orientation === 'horizontal' ? contentAlign : 'left',
+        contentAlign: itemContentAlign,
         hasLine: hasLine,
         hasLoader: hasLoader && isActive,
-        onClick: onChange ? function () {
-          return onChange(item, index, prevIndex);
-        } : undefined,
+        onClick: onClick,
         items: items
       });
     }));
@@ -118,6 +111,6 @@ export var stepsConfig = {
   },
   defaults: {
     view: 'default',
-    size: 's'
+    size: 'm'
   }
 };

package/emotion/es/components/Steps/Steps.styles.js

@@ -1,3 +1,3 @@
 import { css } from '@emotion/react';
 import { classes, tokens } from './Steps.tokens';
-export var base = /*#__PURE__*/css("display:flex;flex-direction:row;&.", classes.simple, "{align-items:center;&.", classes.hasIndicator, "{height:var(", tokens.activeIndicatorSize, ");}&:not(.", classes.hasIndicator, "){height:var(", tokens.activeBulletSize, ");}&.", classes.verticalOrientation, "{&.", classes.hasIndicator, "{width:var(", tokens.activeIndicatorSize, ");height:auto;}&:not(.", classes.hasIndicator, "){width:var(", tokens.activeBulletSize, ");height:auto;}}}&.", classes.verticalOrientation, "{display:inline;flex-direction:column;justify-content:center;&.", classes.simple, "{display:inline-flex;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU3RlcHMvU3RlcHMuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1N0ZXBzL1N0ZXBzLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY2xhc3NlcywgdG9rZW5zIH0gZnJvbSAnLi9TdGVwcy50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cbiAgICAmLiR7Y2xhc3Nlcy5zaW1wbGV9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgICAmLiR7Y2xhc3Nlcy5oYXNJbmRpY2F0b3J9IHtcbiAgICAgICAgICAgIGhlaWdodDogdmFyKCR7dG9rZW5zLmFjdGl2ZUluZGljYXRvclNpemV9KTtcbiAgICAgICAgfVxuICAgICAgICAmOm5vdCguJHtjbGFzc2VzLmhhc0luZGljYXRvcn0pIHtcbiAgICAgICAgICAgIGhlaWdodDogdmFyKCR7dG9rZW5zLmFjdGl2ZUJ1bGxldFNpemV9KTtcbiAgICAgICAgfVxuXG4gICAgICAgICYuJHtjbGFzc2VzLnZlcnRpY2FsT3JpZW50YXRpb259IHtcbiAgICAgICAgICAgICYuJHtjbGFzc2VzLmhhc0luZGljYXRvcn0ge1xuICAgICAgICAgICAgICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuYWN0aXZlSW5kaWNhdG9yU2l6ZX0pO1xuICAgICAgICAgICAgICAgIGhlaWdodDogYXV0bztcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgICY6bm90KC4ke2NsYXNzZXMuaGFzSW5kaWNhdG9yfSkge1xuICAgICAgICAgICAgICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuYWN0aXZlQnVsbGV0U2l6ZX0pO1xuICAgICAgICAgICAgICAgIGhlaWdodDogYXV0bztcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnZlcnRpY2FsT3JpZW50YXRpb259IHtcbiAgICAgICAgZGlzcGxheTogaW5saW5lO1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICAgICAmLiR7Y2xhc3Nlcy5zaW1wbGV9IHtcbiAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgICAgICB9XG4gICAgfVxuYDtcbiJdfQ== */"));
+export var base = /*#__PURE__*/css("display:flex;flex-direction:row;&.", classes.simple, "{align-items:center;&.", classes.hasIndicator, "{height:var(", tokens.activeIndicatorSize, ");}&:not(.", classes.hasIndicator, "){height:var(", tokens.activeBulletSize, ");}&.", classes.verticalOrientation, "{&.", classes.hasIndicator, "{width:var(", tokens.activeIndicatorSize, ");height:100%;}&:not(.", classes.hasIndicator, "){width:var(", tokens.activeBulletSize, ");height:100%;}}}&.", classes.verticalOrientation, "{display:inline;flex-direction:column;justify-content:center;&.", classes.simple, "{display:inline-flex;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU3RlcHMvU3RlcHMuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1N0ZXBzL1N0ZXBzLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY2xhc3NlcywgdG9rZW5zIH0gZnJvbSAnLi9TdGVwcy50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cbiAgICAmLiR7Y2xhc3Nlcy5zaW1wbGV9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgICAmLiR7Y2xhc3Nlcy5oYXNJbmRpY2F0b3J9IHtcbiAgICAgICAgICAgIGhlaWdodDogdmFyKCR7dG9rZW5zLmFjdGl2ZUluZGljYXRvclNpemV9KTtcbiAgICAgICAgfVxuICAgICAgICAmOm5vdCguJHtjbGFzc2VzLmhhc0luZGljYXRvcn0pIHtcbiAgICAgICAgICAgIGhlaWdodDogdmFyKCR7dG9rZW5zLmFjdGl2ZUJ1bGxldFNpemV9KTtcbiAgICAgICAgfVxuXG4gICAgICAgICYuJHtjbGFzc2VzLnZlcnRpY2FsT3JpZW50YXRpb259IHtcbiAgICAgICAgICAgICYuJHtjbGFzc2VzLmhhc0luZGljYXRvcn0ge1xuICAgICAgICAgICAgICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuYWN0aXZlSW5kaWNhdG9yU2l6ZX0pO1xuICAgICAgICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgICY6bm90KC4ke2NsYXNzZXMuaGFzSW5kaWNhdG9yfSkge1xuICAgICAgICAgICAgICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuYWN0aXZlQnVsbGV0U2l6ZX0pO1xuICAgICAgICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnZlcnRpY2FsT3JpZW50YXRpb259IHtcbiAgICAgICAgZGlzcGxheTogaW5saW5lO1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICAgICAmLiR7Y2xhc3Nlcy5zaW1wbGV9IHtcbiAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgICAgICB9XG4gICAgfVxuYDtcbiJdfQ== */"));

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

@@ -9,6 +9,7 @@ export var classes = {
   verticalOrientation: 'vertical-orientation',
   hasIndicator: 'item-has-indicator',
   activeItem: 'item-active',
+  indentDivider: 'indent-divider',
   transparentDivider: 'transparent-divider'
 };
 export var tokens = {

package/emotion/es/components/Steps/ui/StepItem/StepItem.js

@@ -12,6 +12,8 @@ import React, { useState, useEffect } from 'react';
 import cls from 'classnames';
 import { classes, tokens } from '../../Steps.tokens';
 import { Bullet, BulletIndicator, BulletIndicatorWrapper, StepItemContent, StepItemContentWrapper, StepItemDivider, StepItemStyled, StepItemTitle, SpinnerStyled } from './StepItem.styles';
+
+// todo попробовать заменить через baseline выравнивание
 var indicatorSizesIndentsMap = {
   8: /*#__PURE__*/"var(".concat(tokens.smallBulletIndentHeight, ")"),
   16: /*#__PURE__*/"var(".concat(tokens.largeBulletIndentHeight, ")"),
@@ -61,7 +63,7 @@ export var StepItem = function StepItem(_ref) {
   } else {
     resultIndicatorSize = isActive ? 16 : 8;
   }
-  var sizeToken = indicatorSizesIndentsMap[resultIndicatorSize];
+  var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
   var onMouseOver = clickable && !isDisabled ? function () {
     if (isDisabled) {
       setIsHovered(false);
@@ -88,14 +90,10 @@ export var StepItem = function StepItem(_ref) {
   }, contentAlign === 'center' && !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
     className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive))
   }), isVertical && (isSimple ? !isFirst : true) && /*#__PURE__*/React.createElement(StepItemDivider, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
-    style: {
-      height: isSimple ? 'none' : sizeToken,
-      minHeight: sizeToken,
-      maxHeight: isSimple ? 'none' : sizeToken
-    }
+    className: cls(classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
+    indentToken: indentToken
   }), hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
-    size: hasIndicator ? "var(".concat(tokens.activeIndicatorSize, ")") : "var(".concat(tokens.activeBulletSize, ")")
+    hasIndicator: hasIndicator
   }), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
     className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive))
   }, typeof indicator === 'function' && indicator({
@@ -113,6 +111,6 @@ export var StepItem = function StepItem(_ref) {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut
   }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' && content(status, index, items), typeof content !== 'function' && content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
+    className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
   }));
 };